在div中以表格形式打印json数据。

Question

我正在通过$.ajax() jquery函数接收JSON格式的名称和电子邮件数据。我需要将这些数据以表格格式放在div ('#div1')中。我做不到。有人能帮忙吗？

JSON收到：

[{"jname":"Charles","jemail":"charles@gmail.com"},{"jname":"Bollen","jemail":"bollen@gmail.com"},{"jname":"Sita","jemail":"sita@gmail.com"},{"jname":"Lita","jemail":"lita@gmail.com"},{"jname":"Azma","jemail":"azma@gmail.com"},{"jname":"Robert","jemail":"robert@gmail.com"},{"jname":"Charu","jemail":"charu@gmail.com"}]

jQuery Ajax代码：

$.ajax({
    type: "POST",
    url: "retrieve.php",
    data: jQuery("#form1").serialize(),
    cache: false,
    success:  function(data){
       $('#div1').html(data);
    }
});

拜托救救我。我需要打印这些数据的表格形式，在一个div名称和电子邮件。

Answer 1

用一张桌子怎么样？就像这样：

 $.ajax({
    type: "POST",
    url: "retrieve.php",
    data: jQuery("#form1").serialize(),
    cache: false,
    success:  function(data){
       var html = '<table>';
       JSON.parse(data).forEach(function(item){ 
           html += '<tr><td>'+item.jname+'<td><td>'+item.jemail+'</td></tr>'; 
       });
       html += '</table>';
       $('#div1').html(html);
}

})；

Answer 2

将JSON数据放入表行，不要忘记<tbody>

var HTML = '';
var JSON = [{"jname":"Charles","jemail":"charles@gmail.com"},
            {"jname":"Bollen","jemail":"bollen@gmail.com"}];
JSON.forEach(function(person){
    HTML += '<tr><td>' + person.jname + '</td><td>' + person.jemail + '</td></tr>';
});
document.body.insertAdjacentHTML('afterbegin','<table><tbody>' + HTML + '</tbody></table>');

Answer 3

你需要解析它。

例如：

$.ajax({
type: "POST",
url: "retrieve.php",
data: jQuery("#form1").serialize(),
cache: false,
success:  function(data){
   var parse = JSON.parse(data);
   //then do what you are going to do.
   alert(parse.jname);
   alert(parse.jemail);
}