0

我想知道 jquery/ajax 如何向服务器发送查询，然后让服务器 (php) 计算响应，然后再次使用 jquery/ajax 将其附加到网页？

示例：我在数据库中有 3 个产品，每个产品的详细信息（名称、描述和图像）。我有一个包含这 3 种产品链接的页面，我只想使用 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>

这显示了所有产品，我怎样才能只显示点击的产品？

4

2 回答 2

3

这里有一些问题。首先你的js：

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

将尝试将 products.php 加载到具有 div 类而不是 div 元素的元素中。

其次，它将尝试从与您的 js 脚本相同的目录位置加载 products.php。您可能想做 /products.php 然后将 products.php 放在根目录中。

最后，您的 HTML 不正确，因为您的 LI 标签周围需要一个 UL 或 OL 标签。

要让 php 返回单个产品，您需要将产品 ID 传递给 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")

这应该为你做，有点摆弄。

于 2013-10-01T10:04:20.940 回答
2

添加一个 id 到标签，这将是产品 id，然后将产品 id 传递给 jquery 的负载，如下所示：

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

在 php 中，执行 $_GET['prodid'] 以获取点击的产品 ID，并修改您的查询以使用 WHERE 子句。

现在，不要指望完整的解决方案，您可以从这里取下它。

于 2013-10-01T09:54:50.200 回答