使用jQuery从Ajax响应构建表行(不使用静态json数据)


Using jQuery to build table rows from Ajax response (not with static json data)

我有一个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>

此代码不起作用。它只创建第一行,但不从getjson.php获得json响应。当我像这样在jsfiddle中将其与静态json数据一起使用时https://jsfiddle.net/tqyn3/761/,它按我的意愿工作。但是我想从getjson.php获取数据。如何将其转换为动态?

更新:在调试器控制台中,它在上面写道:

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"}]}

它在下面用红色文本写道:

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"}]}

我终于自己找到了答案:固定代码为:

$(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);
        }   
    });
});

我应该添加"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>

确保在PHP中将头设置为JSON。验证响应变量是否也具有您期望的结构。这可能是php中结构创建的问题。有时json_encode会做一些与您预期不同的事情。

控制台日志代表把它放在这里:

success: function(response) {
    console.log(response);
    // the rest of your code
}

尝试:

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);
}