0

jquery/ajax がサーバーにクエリを送信し、サーバー (php) に応答を計算させ、それを jquery/ajax で Web ページに再度追加する方法を知りたいですか?

例 : データベースに 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");

div要素ではなく、divのクラスを持つ要素にproducts.phpをロードしようとします。

次に、js スクリプトと同じディレクトリの場所から products.php をロードしようとします。/products.php を実行してから、products.php をルートに配置することをお勧めします。

最後に、LI タグの周りに UL または OL タグが必要なため、HTML は正しくありません。

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 に答える