jquery/ajax запрос на сервер и отображение выбранной записи

Question

Мне интересно, как jquery/ajax может отправить запрос на сервер, а затем дать серверу (php) вычислить ответ и добавить его на веб-страницу с помощью jquery/ajax снова ?

Пример: У меня есть 3 продукта в базе данных с подробной информацией по каждому продукту (название, описание и изображение). У меня есть страница со ссылками на эти 3 продукта, и я хочу, чтобы отобразить только Clicked детали продукта с JQuery/Ajax:

HTML:

<nav> 
    <ul> 
     <li><a href="#prod1">prod1</a></li> 
     <li><a href="#prod2">prod2</a></li> 
     <li><a href="#prod3">prod3</a></li> 
    </ul> 
</nav> 
<div></div> 

JS

$(document).ready(function() { 
    $('a').click(function(){ 
     $('div').load("products.php"); 
    }); 
}); 

это то, что мой файл products.php выглядит так:

<?php 
try 
    {$bdd = new PDO('mysql:host=localhost;dbname=ddb', 'root', '');} 
catch (Exception $e) 
    {die('Error : ' . $e->getMessage());} 
$reponse = $bdd->query('SELECT * FROM products ORDER BY id DESC') or die(print_r($bdd->errorInfo())); 
?> 

<div class="prod_details"> 
    while ($data = $reponse->fetch()){ ?> 
     <h1><?php echo $products['name']; ?></h1> 
     <p><?php echo $products['description']; ?></p> 
     <img src="<?php echo $products['image_path']; ?>"> 
    <?php }?> 
</div> 

Это отображает все p Как я могу получить только отображаемый продукт?

Answer 1

Здесь несколько вещей не так. Прежде всего, ваши JS:

$('.div').load("products.php"); 

будет пытаться загрузить products.php в элемент с классом DIV не в элемент DIV.

Во-вторых, он попытается загрузить products.php из того же каталога, что и ваш js-скрипт. вы, вероятно, захотите сделать /products.php, а затем поместите product.php в корневой каталог.

И, наконец, ваш HTML-код неверен, так как вам нужны теги UL или OL вокруг ваших тегов LI.

Чтобы получить php для возврата отдельного продукта, вам необходимо передать идентификатор продукта на ваш PHP, а затем изменить SQL-запрос, чтобы принять предложение WHERE id. что-то вроде этого:

HTML:

<nav> 
    <ul> 
    <li><a href="#prod1" data-id="1">prod1</a></li> 
    <li><a href="#prod2" data-id="2">prod2</a></li> 
    <li><a href="#prod3" data-id="3">prod3</a></li> 
    </ul> 
</nav> 
<div></div> 

JS:

$(document).ready(function() { 
    $('a').click(function(){ 
     $('div').load("products.php?id=" + $(this).attr('data-id')); 
    }); 
}); 

Тогда ваш PHP запрос должен быть:

$id = $_GET['id']; 
query("SELECT * FROM products WHERE `id` = '$id' ORDER BY id DESC") 

Это должно сделать это для вас, с немного возиться.

Answer 2

Добавить идентификатор в теге, который будет идентификатор продукта, а затем передать идентификатор продукта для нагрузки Jquery как ниже:

$('.div').load("products.php?prodid=" + $(this).attr('id')); 

В PHP, сделать $ _GET [ «ProdID»], чтобы получить щелкнул продукт id и измените ваш запрос, чтобы использовать предложение WHERE.

Теперь, не ожидайте полных решений, вы можете снять его здесь.