Question

我想知道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>

显示所有产品，如何才能显示所点击的产品？

Answer 1

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

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

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

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

最后您的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")

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

Answer 2

在标签中添加一个id，它将是产品ID，然后将产品ID传递给jquery的加载，如下所示：

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

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

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

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

2 个答案: