使用 AJAX 检索 JSON 数据并显示在表中

Question

我对使用 jQuery 进行编程非常陌生。我花了很长时间试图推进这件事，我已经设法完成了一些。但我真的碰壁了，我似乎无法从任何地方/任何人那里寻求帮助。

场景：

• 我正在使用一个选择框来存储我通过 PHP/MySQL 检索到的不同音乐流派。

      <?php
  include 'connectingDB.php';
  $catSQL = "SELECT * FROM category ORDER BY catDesc";
  $queryresult = mysql_query($catSQL)
  or die (mysql_error());
  echo "<select id= \"catID\">";
  while ($row = mysql_fetch_assoc($queryresult)) {
      $catID = $row['catID'];
      $catDesc = $row['catDesc'];
  
  
      echo "<option value = \"$catID\">$catDesc</option>\n";
  
  }
  echo "</select>";
  mysql_free_result($queryresult);
  mysql_close($conn);
  ?>
  

• 当我点击一个流派时，我希望以 JSON 格式检索所有相关的 CD 和 CD 信息，并使用 AJAX 动态显示在表格中（在同一页面上的选择框下方）

  <?php
  header('Content-type: application/json');
  include 'connectingDB.php';
  $category = $_REQUEST['catname'];
  $sql = "SELECT `CDID`, `CDTitle`, `CDYear`, `pubID`, `CDPrice`
          FROM `tiptop_cd`
          INNER JOIN tiptop_category
          ON tiptop_cd.catID=tiptop_category.catID
          WHERE catDesc = '{$category}'";
  $result = mysqli_query($con,$sql);
  $row = mysqli_fetch_array($result);
  while($row = mysqli_fetch_array($result)){
      $returned[] = $row;
  }
  echo json_encode($returned);
  

  ?>

• 以上所有代码都可以独立运行。但我希望将它们连接在一起。我认为它需要通过 jQuery 中的 onchange 事件？

• 点击一个类别后我会弹出一个alert，但这是我所能得到的。..

  $(document).ready(function(){
  $("#catID").change(function(){
  alert("The text has been changed.");
  });
  });
  

是否需要在foreach 循环中？还是foreach 中的foreach？

总而言之，我试图了解如何：在带有 ajax 的动态表中显示与当前选择的特定类别相关的 cd 和 cd 信息

非常感谢任何帮助。

Answer 1

希望这可以让你开始

$(document).ready(function () {
    $("#catID").change(function () {
        $.post("index.php?catname=" + $(this).val(), function (data) {
            var table = $('<table></table>'); //create table
            $.each(data, function (index, value) { //loop through array
                var row = $('<tr></tr>'); //create row
                var cell1 = $("<td></td>").val(value.CDID); //create cell append value
                //etc
                row.append(cell1); //append cell to row
                table.append(row); //append row to table
            });
            $('#div').append(table); //append table to your dom wherever you want
        });
    });
});

Answer 2

您可能希望为此目的使用 AJAX。 Ajax 将允许您将用户的选择（即下拉选择）发送到后端 PHP 文件。

PHP 文件将处理接收到的数据（即用户的选择）并根据该信息执行数据库查找。它将从 db 获取结果并（在变量中）构造表所需的 HTML，然后 echo 返回该变量的内容——这将在 AJAX 过程的 success:（或 .done()使用promise语法）函数。

INSIDE 成功/完成功能，可以使用接收到的数据。例如，您可以使用 jQuery .html() 方法将指定 DIV 的内容替换为您收到的 HTML。

我的方法与其他提议的解决方案在以下方面有所不同：

1. 我更喜欢使用完整的 $.ajax() 语法，因为它允许更大的结构，这使得起初更容易理解/操作。请注意，.post()、.get() 和 .load() 都是 $.ajax() 的快捷形式，它们会做出某些假设以简化流程。我建议先学习$.ajax() 格式，然后再使用其他格式。在我自己完成了无数个 ajax 块之后，我继续使用$.ajax() 大部分时间。也许这是一种偏好，但我发现它更容易使用/阅读/审查——而且它还允许其他人没有的额外参数，这使得它更加灵活和有用**。

2. 有必要使用第二个 .PHP 文件来充当您的 ajax 处理器。您不能使用包含 AJAX 代码块的同一个 .PHP 文件。 See this answer.

3. 构建 HTML 表的位置在 PHP（处理器文件）中。如前所述，将其全部构建在一个变量中，然后在最后输出该变量：

注意 $r 变量是如何在 while 循环中构造的，并且只在最后 ECHO 出来。

$aContact_info = mysql_query("SELECT * FROM `contacts`");
$r = '<table>';
while ($rrow = mysql_fetch_array($aContact_info)) {
    $r .= '<tr>
            <td>
                Name:<br/>
                <input type="text" id="first_name" name="first_name" value="'.$rrow['first_name'].'"> 
                <input type="text" id="last_name" name="last_name" value="'.$rrow['last_name'].'">
            </td>
            <td>
                Email:<br/>
                <input type="text" id="email" name="email" value="'.$rrow['email1'].'">
            </td>
            <td>
                Cell Phone:<br/>
                <input type="text" id="cell_phone" name="cell_phone" value="'.$rrow['cell_phone'].'">
            </td>
        </tr>
    ';
}
$r .= '</table>';
echo $r;

以下是一些应该有所帮助的示例：

Simple explanation of AJAX
Example with MySQL lookup in PHP Processor file

---

** .get() 和 .post() 和 $.ajax() 之间的区别：

GET vs POST in AJAX calls
Kevin Chisholm
Sychronous AJAX

Answer 3

另一种（更快的）方法是将 html 表作为字符串返回并将其注入 DOM。在您的 PHP 处理程序中生成表，然后执行 $('#div').load('/index.php?catname=catname');或者像下面那样做 $.get

$(document).ready(function () {
    $("#catID").change(function () {
        $.get({               
            url: 'index.php',
            data: { catname: $(this).val() }
            dataType: 'html',
            success: function (html) {
               $('#div').html(html);
            },
            error: function (xhr, err) { displayErrorMessage("Error: \n\nreadyState: " + xhr.readyState + "\nstatus: " + xhr.status + "\nresponseText: " + xhr.responseText, 'nosave'); }
        });
    });
 });