使用jQuery使用JSON填充表

时间:2013-01-21 18:50:05

标签: jquery ajax html-table

我已经阅读了有关此主题的Stack Overflow上的所有帖子 - 我提炼了我需要的内容......以及我仍然无效的内容。

我想将数据加载到表中 - 使用jQuery(除非js有本地方式这样做)这里是我的代码。

[侧面问题 - 有没有办法将响应对象转储到屏幕上?所以我可以看到所有元素都有用吗? ]

主页

<html>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></head>
<body>
<table>
    <tbody id="testBody">
    </tbody>
</table>

<script>
$( document ).ready( function() {
$( '#testBody' ).html( 'Here We Go...<br/>' );

$.ajax({
type: "POST",
url: "ajax_list_json.htm",
dataType: "json",
success: function ( response ) {
    if( response.success ) {
        //...do something...
        $('#testBody').html('<p>We were successful!</p>');
    } else {
        //...tell user there was a problem...
        $('#testBody').html('<p>There was a problem on the server... Dang.</p>');
        //$('#testBody').append( response ); // was trying to dump the response
    }
}

})

});
</script>
</body>
</html>

这是我送回的JSON ...... 目前这种格式是硬编码的 - 但只要我的流程正确,我就会把它变成动态。

{
"people": [
    { "firstName":"John" , "lastName":"Doe" },
    { "firstName":"Jane" , "lastName":"Smith" },
    { "firstName":"Rusty" , "lastName":"Morals" },
    { "firstName":"oo'ja" , "lastName":"d'Addy" },
    { "firstName":"Wink" , "lastName":"Martindale" },
    { "firstName":"Woody" , "lastName":"Knowl" },
    { "firstName":"Tom" , "lastName":"Thumb" },
    { "firstName":"Peter" , "lastName":"Pan" }
]
} 

Firebug中的响应正确回归 - 或者至少我期望的回复。 并且Firebug中的JSON选项卡显示正确的数组 - 所以我相信我的格式正确。

有任何帮助吗?我想我无法继续将数据放到表中,直到我通过'错误检查响应... :(

1 个答案:

答案 0 :(得分:3)

如果请求出现问题,则不会触发success回调。

JSON将直接传递到您的success回调:

$.ajax({
    type: "POST",
    url: "ajax_list_json.htm",
    dataType: "json",
    success: function ( JSONdata ) {
        // all's good, loop through your JSONdata
    },
    error: function () {
        // there's an error
    }
});