使用ajax將數據從一個PHP頁面傳遞到另一頁面

Question

好的，所以我有一個頁面，名為albums.php，其中包含以下代碼：

<?php

    require_once('./config.php');

    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

    $album = $mysqli->query("SELECT * FROM Albums");

    print('<div id="grid">');
    print('<ul>');
    while ($row = $album->fetch_assoc()) {
        $cover = $row['Album_Cover'];
        $name = $row['Album_Name'];
        $id = $row['Album_ID'];

        print ('<li>');
            print('<form method="POST" action="">');
                print("<input type='image' src=$cover name='image' id='image' class=$id>");
            print("</form>");
            print('<br/>');
            print ("$name");
        print ('</li>');
    }
    print('</ul>');
    print('</div>');

    print('<br/>');
    print('<br/>');
    print('<br/>');
    print('<br/>');

    $mysqli->close();

    ?>

DB_HOST，DB_USER，DB_PASSWORD和DB_NAME來自config.php。 albums.php（同樣，上面的代碼）鏈接到腳本button.js，其代碼如下：

$("#image").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('class');
    var dataString = 'id='+id;
    $.ajax({
        type: "POST",
        data: dataString,
        url: "./pictures.php",
        success: function(data) {
            alert(data);
        }
    });
});

我的目標是使用Ajax將點擊的圖像的ID傳遞給pictures.php。 我的pictures.php代碼如下：

<?php

require_once('./config.php');
require_once('./albums.php');

$id = $_POST['id'];

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

$pictures = $mysqli->query("SELECT * FROM Pictures WHERE Album_ID = $id");

print('<div id="grid">');
print('<ul>');
while ($row = $pictures->fetch_assoc()) {
    $picture = $row['Picture'];

    print("<li><img src=$picture class='thumbnail'></li>"); 
}
print('</ul>');
print('</div>');

$mysqli->close();

?>

我還必須在pictures.php中鏈接button.js腳本嗎？ 除此之外，我無法想到此代碼可能存在的問題。 順便說一句，所有這三個文件都存儲在服務器上的同一文件夾中，因此我相信我可以正確訪問它們。 任何幫助將非常感激！

Answer 1

只說幾件事：

---

1. 如評論中所述，Id必須是唯一的，但不會使您的代碼崩潰。

2. 您必須將js代碼放在構造圖像元素的php代碼之前，否則必須使用jquery的$(document).ready(function(){//your code}) ； 以確保您正在注冊圖像的點擊事件偵聽器。

3. 在您的js更改：
   var dataString = 'id='+id; 到var dataString = id; 和
   url: "./pictures.php"到網址： "pictures.php"