最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

I have a javascript and html code of:

<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 /, it works just as I want. But I want to get data from getjson.php. How can I convert this to dynamic?

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

I have a javascript and html code of:

<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/tqyn3/761/, it works just as I want. But I want to get data from getjson.php. How can I convert this to dynamic?

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"}]}
Share Improve this question edited Jun 29, 2015 at 7:07 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Jun 26, 2015 at 13:31 gunesgunes 1311 gold badge1 silver badge14 bronze badges 4
  • check what is returned by server (console.log(response)) – Daimos Commented Jun 26, 2015 at 13:36
  • what is the getjson.php?perhaps getjson does not return json valid – ashkufaraz Commented Jun 26, 2015 at 13:36
  • getjson.php is another file of getting data from mysql and parsing it to json. When I call only getjsonphp, it returns data without any problem. In my jsfiddle link, its the data returned from getjson.php – gunes Commented Jun 26, 2015 at 13:39
  • Thanks for wanting to mark your question as solved. However, we don't use title hacks to do this here - instead, click the tick mark to the left of your preferred answer, to mark this as the solution. – halfer Commented Jun 29, 2015 at 7:06
Add a ment  | 

2 Answers 2

Reset to default 4

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:

<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>

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.

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);
}
发布评论

评论列表(0)

  1. 暂无评论