表格中HTML页面中的JSON数据
[英]JSON data in HTML page in a table
问题描述
I struggling print all my data from DB to webpage using JSON. 
我努力使用JSON将所有数据从数据库打印到网页。 But I not understand logical how it should work. 但是我不明白它应该如何工作。 My JSON script: 我的JSON脚本：
<script>
$("document").ready(function() {
$.getJSON("test1.php", function(data) {
$("#div-my-table").text("<table>");
$.each(data, function(i, item) {
$("#div-my-table").append("<tr><td>" + item.code +"</td><td>" + item.name + "</td></tr>");
});
$("#div-my-table").append("</table>");
});
});
</script>
And test1.php file 和test1.php文件
<?php
require_once 'connection.php';
$sql = $conn -> prepare("SELECT * FROM DB_NAME");
$sql -> execute();
while ($row = $sql -> fetch(PDO::FETCH_ASSOC))
{
$values = array('code'=>$row['code'],
'line'=>$row['line']);
}
echo json_encode($values);
?>
and part of HTML: 以及部分HTML：
<body>
<table id="div-my-table">
</table>
</body>
And system return back only: 并且系统仅返回：
<table>
undefined undefined
undefined undefined
4 个解决方案
解决方案1
2 2014-12-04 10:45:22
First make below correction in your code 首先在您的代码中进行以下更正
$values[] = array('code'=>$row['code'],'line'=>$row['line']);
Above change will append all database value to $value variable and will show all records instead of last record of db 上面的更改会将所有数据库值附加到$ value变量中，并显示所有记录，而不是db的最后一条记录
Also Please check with your table name in below query 另外请在下面的查询中检查您的表名
$sql = $conn -> prepare("SELECT * FROM DB_NAME");
It seems that you are taking db name constant here instead of table name as mentioned below. 似乎您在这里使用数据库名称常量而不是如下所述的表名称。
$sql = $conn -> prepare("SELECT * FROM TABLE_NAME"); $ sql = $ conn-> prepare（“ SELECT * FROM TABLE_NAME”）;
解决方案2
1 2014-12-04 10:46:33
You're overwriting the same $values variable each time through the loop. 每次循环时，您都将覆盖相同的$values变量。 At the end, it will just contain a single row, not an array of all the rows. 最后，它将仅包含一行，而不是所有行的数组。 You need to add each row to $values , not replace it. 您需要将每一行添加到$values ，而不是替换它。 It should be: 它应该是：
$values = array();
while ($row = $sql -> fetch(PDO::FETCH_ASSOC))
{
$values[] = $row;
}
echo json_encode($values);
Also, your jQuery is wrong. 另外，您的jQuery是错误的。 You shouldn't use .text() when you're creating HTML, you should use .html() . 创建HTML时不应使用.text() ，而应使用.html() 。 And you don't need to append </table> -- these functions operate on the DOM, not the HTML, and the DOM always has complete elements. 而且您不需要附加</table> －这些函数在DOM而不是HTML上运行，并且DOM始终具有完整的元素。
$("document").ready(function() {
$.getJSON("test1.php", function(data) {
var table = $("<table>");
$("#div-my-table").empty().append(table);
$.each(data, function(i, item) {
table.append("<tr><td>" + item.code +"</td><td>" + item.name + "</td></tr>");
});
});
});
解决方案3
1 已采纳 2014-12-04 10:47:16
If you're expecting multiple rows, you need to gather the results properly. 如果期望有多行，则需要正确收集结果。 The $values gets overwritten every iteration. $values每次迭代都会被覆盖。
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
// add another dimension
$values[] = array(
'code'=>$row['code'],
'line'=>$row['line']
);
}
echo json_encode($values);
Or for just one line: 或仅一行：
echo json_encode($sql->fetchAll(PDO::FETCH_ASSOC));
So that they are properly nested. 使它们正确嵌套。
Then on your JS: 然后在您的JS上：
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("test1.php", function(data) {
var table_rows = '';
$.each(data, function(i, item) {
table_rows += "<tr><td>" + item.code +"</td><td>" + item.name + "</td></tr>");
});
$("#div-my-table").html(table_rows);
});
});
</script>
解决方案4
0 2014-12-04 10:45:13
Use last.after(); 使用last.after();
Instead of append(); 而不是append();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.