php - 从AJAX响应填充HTML表

我在MySQL数据库中有一些数据。我想根据用户选择的参数在html表中显示该数据。
以下是输入部分（HTML）

<form class="form-inline">
    <div class="input-group">
        <div>Enter Person Name</div>
        <input class="form-control" id="tags">
    </div>
    <div class="btn-group">
        <button type="submit" id="btnSubmit">Search</button>
    </div>
</form>

这是我要填充来自AJAX响应的数据的表。

<div class="dataTable_wrapper">
    <table class='table table-striped table-bordered table-hover' id='records_table'>
        <tr class='odd gradeX'>
            <th>Name</th>
            <th>Group</th>
            <th>Work</th>
            <th>Grade1</th>
            <th>Grade2</th>
            <th>Grade3</th>
            <th>TeacherName</th>
            <th>RollNo</th>
        </tr>
    </table>
</div>

现在单击“搜索”按钮，我想将名称发送到PHP文件，并获取信息表单数据库。

为此，我做到了：

$(document).ready(function () {
    $("#btnSubmit").click(function (e) {
        e.preventDefault();
        var selText = $('#tags').val();

        if (selText === '') {
            alert("Please select a name!");
        } else {
            $.ajax({
                type: 'GET',
                url: 'getData.php',
                jsonpCallback: 'jsonCallback',
                dataType: 'jsonp',
                jsonp: false,
                data: {
                    q: selText
                },
                success: function (response) {
                    alert(response);
                    var trHTML = '';

                    $.each(response, function (i, item) {
                        $.each(item, function (_, o) {
                            trHTML += '<tr><td>' + o.Name +
                                '</td><td>' + o.Group +
                                '</td><td>' + o.Work +
                                '</td><td>' + o.Grade1 +
                                '</td><td>' + o.Grade2 +
                                '</td><td>' + o.Grade3 +
                                '</td><td>' + o.TeacherName +
                                '</td><td>' + o.RollNo. +
                                '</td></tr>';
                        });
                    });
                    $('#records_table').append(trHTML);
                },
                error: function (e) {
                    $("#txtHint").html(e.responseText);
                }
            });
        }
    });
});

PHP代码是

<?php
$servername = "localhost"; $username = "root"; $password = "21343"; $dbname = "do_demob";
$selectedName = $_GET['q'];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT *** Don't have rights to reveal";
$result = mysqli_query($conn, $sql);
$rows = array();
if($result) {
    while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
    }
}else {
    echo 'MySQL Error: ' . mysqli_error();
}
$json = json_encode($rows);
echo $json;
mysqli_close($conn);
?>

AJAX响应是

[{"Name":"Sagar Mujumbdar","Group":"","TeacherName":"John     Cena","RollNo":"SX51998","Work":"Sales","Grade1":"Good","Grade2":"5","Grade3":"1"}]

状态代码为：200 OK。我还检查了开发人员工具的“网络”部分，数据以正确的格式完整发送。密钥名称也正确。
但是很遗憾，该数据没有显示在表中。
是因为JSON对象包含空值，所以不显示它的原因？
如果不是，那还有什么原因呢？

最佳答案

您在RollNo之后有语法错误：

'</td><td>' + o.RollNo. +

删除.。
在迭代中，您需要深入一个元素，o.*将是未定义的，因为o已经是"Sagar Mujumbdar"，""等。一个.each就足够了：

$.each(response, function (i, o) {
    trHTML += '<tr><td>' + o.Name +
              '</td><td>' + o.Group +
              '</td><td>' + o.Work +
              '</td><td>' + o.Grade1 +
              '</td><td>' + o.Grade2 +
              '</td><td>' + o.Grade3 +
              '</td><td>' + o.TeacherName +
              '</td><td>' + o.RollNo. +
              '</td></tr>';
});

我还用您的AJAX响应创建了一个fiddle。