javascript - 使用 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 事件来实现？

• 点击类别后，我会弹出一个警报，但这只是我能得到的信息。

  $(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
        });
    });
});