如何加载更多的Ajax数据，引用发布ID（使用php获取）

Question

我有一个“ img_title”列表。 通过数据库从数据库-动态列表中获取“ img_title”。

 +------------------------+ | img_title: | +========================+ | golden Retriever | +------------------------+ | Appenzeller Sennenhund | +------------------------+ | German Shepard | +------------------------+ | Alaskan Klee Kai | +------------------------+ | . . . . . | +------------------------+

如果用户单击“ img_title” ...

 +-----------------------------+ |<b>Appenzeller Sennenhund</b>| +-----------------------------+

...然后应单独显示一个带有“ img_descr”并通过AJAX提取的新div框：

 +-----------------------------+ +-----------------------------+ | 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);
?>

Answer 1

当您需要将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>";
 }

接下来，您必须在事件处理程序中获取此数据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);
?>

如何加载更多的Ajax数据，引用发布ID（使用php获取）

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-09-12 20:11:13

如何加载更多的Ajax数据，引用发布ID（使用php获取）

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-09-12 20:11:13

解决方案1
3 已采纳 2018-09-12 20:11:13