使用JQuery从JSON数组动态添加数据到HTML表

时间:2012-06-28 06:51:05

标签: php jquery mysql html json

php文件:

   <?php
mysql_connect("127.0.0.1");
mysql_select_db("test"); 
$sql=mysql_query("select first,last,email,city from userdata"); 
while($row=mysql_fetch_assoc($sql))
$output[]=$row;
print(json_encode($output)); 
   mysql_close(); 
?>

json输出:

[{"first":"nag","last":"ch","email":"nag@gmail.com","city":"guntur"},{"first":"hari","last":"ch","email":"hari@gmail.com","city":"guntur"}] 

html代码:

 <script>
    $(document).show(function(){
    });

        $("#userdata tbody").html("");
        $.getJSON("http://127.0.0.1/reg/userdata.php",function(data){
              $.each(data,function(i,user){
                    var tblRow =
                        "<tr>"
                          +"<td>"+user.first+"</td>"
                          +"<td>"+user.last+"</td>"
                          +"<td>"+user.email+"</td>"
                          +"<td>"+user.city+"</td>"
                        +"</tr>"
                    $(tblRow).appendTo("#userdata tbody");
                });
            }
        );
    </script>

我是用JSON格式的数据库显示来自数据库的数据..我想在html页面中将这些数据插入表格格式,我在html中创建了表格..我尝试使用上面的脚本但是它没有获取任何数据..plz帮我PLZ ..

2 个答案:

答案 0 :(得分:0)

根据您的php代码,data是一个数组,并且没有userdata属性。

$.each(data.userdata, function(i,user){

应该是

$.each(data, function(i,user){

THE DEMO

答案 1 :(得分:0)

您的PHP正在以递增的格式打印数组。

进行以下更改:

print(json_encode($row)); 

接下来,输出中没有 userdata ,因此只需使用data