[英]How to load more ajax data refering to the post ID, fetched with php
I have a "img_title" list.
我有一个“ img_title”列表。 The 'img_title' getting fetched
via php from database - dynamic list.
通过数据库从数据库-动态列表中获取“ img_title”。
+------------------------+ | img_title: | +========================+ | golden Retriever | +------------------------+ | Appenzeller Sennenhund | +------------------------+ | German Shepard | +------------------------+ | Alaskan Klee Kai | +------------------------+ | . . . . . | +------------------------+
If the user clicks on a "img_title" ...
如果用户单击“ img_title” ...
+-----------------------------+ |<b>Appenzeller Sennenhund</b>| +-----------------------------+
... then should show up a new div box with the "img_descr" separately and fetched
via AJAX :
...然后应单独显示一个带有“ img_descr”并
通过AJAX提取的新div框:
+-----------------------------+ +-----------------------------+ | Appenzeller Sennenhund | |<b>Swiss: ABC123... </b>| +-----------------------------+ +-----------------------------+
... or ... 要么
+-----------------------------+ +-----------------------------+ | golden Retriever | |<b>UK: ZYX987... </b>| +-----------------------------+ +-----------------------------+
I need a connection between the php fetched data and the ajax fetched data. 我需要在php提取的数据和ajax提取的数据之间建立连接。
I only know how to fetch all description at once but not how to fetch "img_title - ID:3" (php) with only "img_descr - ID:3" (ajax). 我只知道如何一次获取所有描述,但不知道如何仅通过“ img_descr-ID:3”(ajax)获取“ img_title-ID:3”(php)。
I thought about to fetch also the "img_id" and refering to that, ajax could fetch more data from database. 我曾想过也要获取“ img_id”,并且引用它,ajax可以从数据库获取更多数据。
Here is my code (without img_id connection between php & ajax fetched data) 这是我的代码(php和ajax提取数据之间没有img_id连接)
HTML & PHP: 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
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
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);
?>
As you need to pass ID to server, you somehow should store it in a button
, the simpliest way is to use data
-attribute: 当您需要将ID传递给服务器时,您应该以某种方式将其存储在
button
,最简单的方法是使用data
-attribute:
while ($row = mysqli_fetch_array($result))
{
echo "<button class='img_title' data-id='" . $row['id'] . "'>Title: <b>" . $row['img_title'] . "</b></button><br>";
}
Next, you have to get this data-id in event handler. 接下来,您必须在事件处理程序中获取此数据ID。 It can be done via
getAttribute
function: 可以通过
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
}
On serverside your id is available via $_GET['id']
: 在服务器端,您的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);
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.