在div中以表格形式打印从php接收的json数据
问题描述：
I am receiving data in JSON format for name & email by $.ajax() jquery function. I need to put this data in tabular format in a div ('#div1'). I am unable to do this. Can someone help?
JSON received:
[{"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 Code:
$.ajax({
type: "POST",
url: "retrieve.php",
data: jQuery("#form1").serialize(),
cache: false,
success: function(data){
$('#div1').html(data);
}
});
Please, help. I need to print this data in tabular form in a div for Name & Email.
答
What about using a table? Something like this:
$.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);
}
});
答
You need to parse that.
For example:
$.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);
}
答
Put your JSON data into table rows, don’t forget the <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>');