我正在使用jquery的$ .Ajax方法来提取json数据,但它不会将其呈现给页面

时间:2014-02-19 16:47:14

标签: javascript jquery html ajax json

我可以获取部分数据呈现给页面(具体来说:request,ack和return_info)但是它不会呈现我的用户数据(user_id,name,session_token,photo_url)。我需要存储所有用户数据以在表格中呈现。

$(document).ready(function () {
    $.ajax({
        url: "http://url/getaccount",
        type: 'GET',
        dataType: "json",
        data: {
            'account': 'all'
        },
    }).then(function (data) {
        $('.request').append(data.request);
        $('.ack').append(data.ack);
        $('.return_info').append(data.return_info);
        $('user_id').append(data.user_id);
        $('.name').append(data.name);
        $('.session_token').append(data.session_token);
        $('.photo_url').append(data.photo_url);
    });

    console.log();
});

HTML

<table class="table table-striped">

    <tr>
        <td><b>User</b>
        </td>
        <td><b>Turbo User ID</b>
        </td>
        <td><b>Name</b> 
        </td>
        <td><b>Session Token<b></td>
                <td><b>Request</b>
        </td>
        <td><b>Ack</b> 
        </td>
        <td><b>Return Info<b></td>
        </tr>
        <tr>
                <td class="photo_url"></td>
                <td class="user_id"></td>
                <td class="name"></td> 
                <td class="session_token"></td>
                <td class="request"></td>
                <td class="ack"></td> 
                <td class="return_info"></td>
        </tr>
 </table>

我将为数百名用户使用此功能。我不确定我是否需要for循环。谢谢!

1 个答案:

答案 0 :(得分:1)

<table id="myTable" class="table table-striped">
    <thead>
    <tr>
        <th><b>User</b></th>
        <th><b>Turbo User ID</b>
        </th>
        <th><b>Name</b> 
        </th>
        <th><b>Session Token<b></th>
        <th><b>Request</b>
        </th>
        <th><b>Ack</b> </th>
        <th><b>Return Info<b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>            
 </table>

$(document).ready(function () {
    $.ajax({
        url: "http://url/getaccount",
        type: 'GET',
        dataType: "json",
        data: {
            'account': 'all'
        },
    }).then(function (data) {
        for(var i = 0; i < data.accounts.length; i++){
            $('#myTable tbody').append("<tr>");
            $('#myTable tbody').append("<td class=\"photo_url\">" + data.accounts[i].photo_url + "</td>");
            $('#myTable tbody').append("<td class=\"user_id\">" + data.accounts[i].user_id + "</td>");     
            //etc...
            $('#myTable tbody').append("</tr>");             
        }
    });

    console.log();
});