从AJAX响应中填充HTML表 [英] Populate HTML table from AJAX response

问题描述

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

I have some data in MySQL database. I want to show that data in html table based on the parameter selected by the user. Following is the input section (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响应的数据的表.

This is the table where I want to populate the data coming from AJAX response.

<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文件，并获取信息表单数据库.

Now on clicking the 'Search' button, I want to send the name to PHP file, and get the information form database.

我已经做到了:

$(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对象包含空值，所以不显示它的原因? 如果不是，那又是什么原因呢?

the Status Code is:200 OK. I also checked in Developer Tools' Network section, the data is coming completely and in correct format. The key names are also correct. But unfortunately the data is not being displayed in the table. Is the reason that because JSON object contain null values it is not displaying? If not, then what else can be the reason?

推荐答案

尝试以下逻辑.可能有一些错误，例如花括号和逗号，因为我在这里进行了编辑.尝试表标题也在javascript中.我在下面完成了.请检查

Try following logic. There may some error like braces, and comma because i edited it in here. try the table heading is also in javascript. I done it below. Please check

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

这篇关于从AJAX响应中填充HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！