关于php：从AJAX响应中填充HTML表

Populate HTML table from AJAX response

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

1
2
3
4
5
6
7
8
9

<form class="form-inline">

Enter Person Name
<input class="form-control" id="tags">

<button type="submit" id="btnSubmit">Search</button>

</form>

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

1
2
3
4
5
6
7
8
9
10
11
12

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

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

我已经这样做了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

$(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代码是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?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响应是

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

状态代码是：200 OK。我还检查了开发人员工具的网络部分，数据完全正确，格式正确。关键名称也是正确的。
但不幸的是，数据没有显示在表格中。
是因为JSON对象包含空值而不显示？
如果没有，那么还有什么原因呢？

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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