javascript 使用 jQuery 从 Ajax 响应构建表行（不使用静态 json 数据）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31074532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to build table rows from Ajax response (not with static json data)
提问by gunes
I have a javascript and html code of:
我有一个 javascript 和 html 代码：
<script type="text/javascript" src="jquery-1.11.3.js"> </script>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
url: "getjson.php",
type: "POST",
success: function (response)
{
console.log(response);
var trHTML = '';
$.each(response, function (i, item)
{
trHTML +=
'<tr><td>' + item.id +
'</td><td>' + item.konu +
'</td><td>' + item.aciklama +
'</td><td>' + item.giris_tarih +
'</td><td>' + item.degistirilme_tarih +
'</td><td>' + item.ad_soyad +
'</td><td>' + item.email +
'</td></tr>';
});
$('#records_table').append(trHTML);
}
});
});
</script>
<table id="records_table" border='1'>
<tr>
<th align="center" width="50">Id</th>
<th align="center" width="100">Konu</th>
<th align="center" width="100">Aciklama</th>
<th align="center" width="100">Giris Tarih</th>
<th align="center" width="150">Degistirilme Tarih</th>
<th align="center" width="100">Ad Soyad</th>
<th align="center" width="100">Email</th>
</tr>
</table>
This code doesn't work. It only creates first row but doesn't get json response from getjson.php. When I use this with static json data in jsfiddle like this https://jsfiddle.net/tqyn3/761/, it works just as I want. But I want to get data from getjson.php. How can I convert this to dynamic?
此代码不起作用。它只创建第一行，但不会从 getjson.php 获得 json 响应。当我将它与 jsfiddle 中的静态 json 数据一起使用时，就像这样https://jsfiddle.net/tqyn3/761/，它就像我想要的那样工作。但我想从 getjson.php 获取数据。如何将其转换为动态？
Update: In debugger console it writes on the above:
更新：在调试器控制台中，它写在上面：
showjson.php:12
{"kullanicilar":[{"id":"6","konu":"blood angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"singuinius","email":"warhammer"},{"id":"7","konu":"emperors children","aciklama":"daemon primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"fulgrim","email":"warhammer"},{"id":"8","konu":"night lords","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"konrad curze","email":"warhammer"},{"id":"9","konu":"grey knights","aciklama":"grand master","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"grand master","email":"warhammer40k"},{"id":"10","konu":"dark angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"lion el jonson","email":"warhammer40k"}]}
and it writes in below with red text:
它用红色文字写在下面：
jquery-1.11.3.js:577 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in
{"kullanicilar":[{"id":"6","konu":"blood angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"singuinius","email":"warhammer"},{"id":"7","konu":"emperors children","aciklama":"daemon primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"fulgrim","email":"warhammer"},{"id":"8","konu":"night lords","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"konrad curze","email":"warhammer"},{"id":"9","konu":"grey knights","aciklama":"grand master","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"grand master","email":"warhammer40k"},{"id":"10","konu":"dark angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"lion el jonson","email":"warhammer40k"}]}
回答by gunes
I found the answer myself at last: Fixed code is:
我终于自己找到了答案：固定代码是：
$(document).ready(function()
{
$.ajax({
url: "getjson.php",
type: "POST",
dataType:"json",
success: function (response)
{
var trHTML = '';
$.each(response, function (key,value) {
trHTML +=
'<tr><td>' + value.id +
'</td><td>' + value.konu +
'</td><td>' + value.aciklama +
'</td><td>' + value.giris_tarih +
'</td><td>' + value.degistirilme_tarih +
'</td><td>' + value.ad_soyad +
'</td><td>' + value.email +
'</td></tr>';
});
$('#records_table').append(trHTML);
}
});
});
I should have added 'dataType: "json",' And the html is:
我应该添加'dataType：“json”，'并且html是：
<table id="records_table" border='1'>
<tr>
<th align="center" width="50">Id</th>
<th align="center" width="100">Konu</th>
<th align="center" width="100">Aciklama</th>
<th align="center" width="100">Giris Tarih</th>
<th align="center" width="150">Degistirilme Tarih</th>
<th align="center" width="100">Ad Soyad</th>
<th align="center" width="100">Email</th>
</tr>
</table>
回答by Corey Young
Make sure the headers are set to JSON in your PHP. Verify that the response variable has the structure you are expecting as well. It could be an issue with the structure creation in the php. Sometimes json_encode does something different than what you expect.
确保在您的 PHP 中将标头设置为 JSON。验证响应变量是否也具有您期望的结构。这可能是 php.ini 中的结构创建问题。有时 json_encode 会做一些与您预期不同的事情。
to console log the repsonse put it here:
控制台记录响应把它放在这里：
success: function(response) {
console.log(response);
// the rest of your code
}
try:
尝试：
success: function (response)
{
console.log(response);
var trHTML = '';
var data = response.kullanicilar;
for(var i = 0; i < data.length; i++)
{
trHTML +=
'<tr><td>' + data[i].id +
'</td><td>' + data[i].konu +
'</td><td>' + data[i].aciklama +
'</td><td>' + data[i].giris_tarih +
'</td><td>' + data[i].degistirilme_tarih +
'</td><td>' + data[i].ad_soyad +
'</td><td>' + data[i].email +
'</td></tr>';
};
$('#records_table').append(trHTML);
}
