从 AJAX 响应填充 HTML 表

Posted 2023-05-08

【中文标题】从 AJAX 响应填充 HTML 表

【英文标题】：Populate HTML table from AJAX response

【发布时间】：2015-07-22 21:30:15

【问题描述】：

我在 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 对象包含空值而不显示的原因吗？ 如果不是，那还有什么原因呢？

【问题讨论】：

ajax 的响应如何？

继续@Tushar 问题，您发送响应的php 代码是什么？如果您在回复中收到 nulls - 这可能取决于您的 php 代码。

@OfirBaruch 我不这么认为。他说他正在response获取数据

但后来他说Is the reason that because JSON object contain null values it is not displaying? - 或者我误解了那句话。

您的 response 数据真的有 2 层深吗 - $.each(response, function (i, item) $.each(item, function (_, o) ？通常它会在第一个$.each() 下，即。 item.Name、item.Group等

【参考方案1】：

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。

【讨论】：

您的代码也给出了响应，但有错误，即 $("#txtHint").html(e.responseText);

我假设要定义函数jsonCallback，我现在猜不是这样，对吧？使用 JSONP，名称为 jsonpCallback 的函数将被调用，而不是 success，afaik。见this question & answer，答案中的小提琴特别有帮助。

【参考方案2】：

尝试以下逻辑。可能有一些错误，比如大括号和逗号，因为我在这里编辑了它。尝试表格标题也在javascript中。我在下面做了。请检查

$(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 = "<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>";
                    for(var i =0;i < response.length-1;i++)
                      
                         var o= response[i];

                                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>';
                           
                        trHTML+="</table>" 
                        $('#records_table').append(trHTML);
                    ,
                    error: function (e) 
                        $("#txtHint").html(e.responseText);
                    
                );
            
        );
    );