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

Retrieving JSON data and display in a table with AJAX

本文关键字：显示 AJAX JSON 数据 检索      更新时间：2023-09-26

我对使用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);
?>

  • 当我点击一个流派时，我希望所有相关的CD和CD信息都以JSON格式检索，并使用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信息

我们非常感谢您的帮助。

希望这能让你开始

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

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

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

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

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

  1. 我更喜欢使用完整的$.ajax()语法，因为它允许更大的结构，这使得一开始更容易理解/操作。注意，.post()、.get()和.load()都是$.ajax()的快捷形式，它们为了简化流程而做出某些假设。我建议先学习$.ajax()格式，然后再利用其他格式。我自己已经做了大量的ajax块，大多数时候我仍然使用$.ajax()。也许这是一种偏好，但我发现使用/read/review要容易得多，而且它还允许其他参数没有的额外参数，这使它更加灵活和有用**。

  2. 有必要使用第二个PHP文件作为ajax处理器。您不能使用包含AJAX代码块的同一个PHP文件。看看这个答案。

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

注意.get()变量是如何在while循环中构造的，并且在最后只构造出ECHOed。

$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;

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

AJAX的简单解释
PHP处理器文件中MySQL查找示例

**.post()与$.ajax()及CCD_21的差异：

AJAX调用中的GET与POST
Kevin Chisholm
同步AJAX

另一个（更快的）方法是将html表作为字符串返回并将其注入DOM。在PHP处理程序中生成该表，然后执行$（'#div'）.load（'/index.PHP？catname=catname'）；或者做$.像低于一样

$(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'); }
        });
    });
 });
相关文章：