我有一个“ img_title” 列表。从数据库-动态列表中通过php 获取了'img_title'。
+------------------------+
| img_title: |
+========================+
| golden Retriever |
+------------------------+
| Appenzeller Sennenhund |
+------------------------+
| German Shepard |
+------------------------+
| Alaskan Klee Kai |
+------------------------+
| . . . . . |
+------------------------+
如果用户单击“ img_title” ...
+-----------------------------+
|<b>Appenzeller Sennenhund</b>|
+-----------------------------+
...然后应该分别显示一个带有“ img_descr” 的新div框，并通过AJAX 提取：
+-----------------------------+ +-----------------------------+
| Appenzeller Sennenhund | |<b>Swiss: ABC123... </b>|
+-----------------------------+ +-----------------------------+
...或
+-----------------------------+ +-----------------------------+
| golden Retriever | |<b>UK: ZYX987... </b>|
+-----------------------------+ +-----------------------------+
我需要在php提取的数据和ajax提取的数据之间建立连接。
我只知道如何一次获取所有描述，但不知道如何仅使用“ img_descr-ID：3”（ajax）来获取“ img_title-ID：3”（php）。
我想也要获取“ img_id”，并且引用它，ajax可以从数据库获取更多数据。
这是我的代码（php和ajax提取的数据之间没有img_id连接）
HTML和PHP：
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result))
{
echo "<button class='img_title'>Title: <b>" . $row['img_title'] . "</b></button><br>";
}
?>
<div id="descrs"></div>
</body>
JavaScrpit和AJAX
<script>
// Get the buttons (NodeList)
var buttons = document.querySelectorAll("button.img_title");
for(var x=0; x < buttons.length; x++) {
buttons[x].addEventListener('click', loadDescr);
}
function loadDescr(e)
{
var xhr = new XMLHttpRequest();
xhr.open('GET', 'ajax.php', true);
xhr.onload = function()
{
if (this.status == 200)
{
var descrs = JSON.parse(this.responseText);
var output = '';
for (var i in descrs) {
output += '<ul>' +
'<li class="ajax_img_descr">ID: ' + descrs[i].img_descr + '</li>' + '</ul>';
}
document.getElementById('descrs').innerHTML = output;
}
}
xhr.send();
}
</script>
ajax.php
<?php
// Create Connection
$conn = mysqli_connect('localhost', 'root', '', 'xy');
$query = 'SELECT * FROM images';
// Get Result
$result = mysqli_query($conn, $query);
// Fetch Data
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($users);
?>
答案 0 :(得分：3)
由于您需要将ID传递给服务器，因此您应该以某种方式将其存储在button中，最简单的方法是使用data属性：
while ($row = mysqli_fetch_array($result))
{
echo "<button class='img_title' data-id='" . $row['id'] . "'>Title: <b>" . $row['img_title'] . "</b></button><br>";
}
接下来，您必须在事件处理程序中获取此数据ID。可以通过getAttribute函数来完成：
function loadDescr(e)
{
var id = e.target.getAttribute('data-id');
// console.log(id); // for testing purposes
var xhr = new XMLHttpRequest();
xhr.open('GET', 'ajax.php?id=' + id, true);
// more codes
}
在服务器端，您的ID可通过$_GET['id']访问：
<?php
// Create Connection
$conn = mysqli_connect('localhost', 'root', '', 'xy');
$query = 'SELECT * FROM images WHERE id = ' . $_GET['id']; // I simplified this code, but you MUST use prepared statements here to avoid sql-injection
// Get Result
$result = mysqli_query($conn, $query);
// Fetch Data
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($users);
?>