jquery / ajax请求服务器并显示所选记录

Question

I am wondering how jquery/ajax can send a query to the server and then let the server (php) calculte the response, and append it to the webpage with jquery/ajax again?

Example : I have 3 products in database with the details for each product (name, description and image). I have a page with links to these 3 products and I want to display only the clicked product details with 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");
    });
});

this is what my products.php file looks like :

<?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>

This displays all the products, how can I get only the clicked product to be displayed?

Answer 1

there is a few things wrong here. First of all your js:

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

will try to load products.php into an element with the class of div not into the div element.

secondly it will try to load products.php from the same directory location as your js script. you probably want to do /products.php and then place products.php in the root.

Finally your HTML is incorrect as you need a UL or OL tag around your LI tags.

To get the php to return the individual product you will need to pass the product Id to your PHP and then amend the SQL query to accept a WHERE id clause. something like this:

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'));
    });
});

Then your PHP query should be:

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

That should do it for you, with a bit of fiddling.