0

我正在从 Web 服务获取 json 字符串，并希望在 html 页面中显示它。我使用 ajax 来动态显示表格中的行。但问题是所有记录都存在于单行中。

代码：

 function showall(){

        var user = document.getElementById("user_name").value;
        alert(user);
         var row = $("<tr>");
         var nextrow = $("</tr>");

           $.ajax({
           type: "POST",
           url: "webresources/hello/showrequests",
           data : user,
           success : function(data){
                console.log(data);
                $.each(data, function(index, store){
                   $.each(store, function(key,value){
                       row.append($("<td>").html(value));
                      });
               $('#requests').append(row);      
               $('#requests').append(nextrow);
               });           

            },
           error: function(e){
                alert("error"+e+"has occured");
            }
        });

    }

和 html 正文

<body onload="showall();">
        <h1><%=user%></h1>
        <input type="hidden" value="<%=user%>" id="user_name">
        <table border="1" id="requests" style="border-collapse: collapse">
            <tr>
                <th>RequestId</th>
                <th>Request</th>
                <th>Category</th>
                <th>Subcategory</th>
                <th>Department</th>
                <th>Status</th>
            </tr>
        </table>
    </body>

输出就像

col11 | col12 | col13 | col21 | col22 | col23|

我期待像

col11 | col12 | col13 | 
col21 | col22 | col23|

我从网络服务发送的 JSONArray 就像

[{"requestid":1,"request":"Increase RAM from 4GB to 8GB","category":"Hardware","subcategory":"To increase the RAM","department":"System","status":"Pending for approval"},{"requestid":2,"request":"Increase RAM from 2GB to 4GB\n","category":"Hardware","subcategory":"To increase the RAM","department":"System","status":"Pending for approval"},{"requestid":3,"request":"Increase RAM from 1 GB to 4 GB","category":"Hardware","subcategory":"To increase the RAM","department":"System","status":"Pending for approval"}]

我还需要在 ajax 中做什么？谢谢

4

4 回答 4

1

好吧，在我看来，问题在于该行是在您的循环之外获取的。所以本质上你是添加到该行，附加它，然后重新使用同一个对象（带有以前的附加）来完成你的下一轮数据附加。您每次都需要创建新的行对象（在循环内）。

更新：看到这个jsbin

function showall(){

    var user = document.getElementById("user_name").value;
       $.ajax({
       type: "POST",
       url: "webresources/hello/showrequests",
       data : user,
       success : function(data){
            $.each(resp, function(index, store){
              var tr = $('<tr></tr>');

              $.each(store, function(key,value){
                tr.append($('<td></td>').html(value));
              });

              $('#requests').append(tr);
            });
        },
       error: function(e){
            alert("error"+e+"has occured");
        }
    });
}
于 2013-08-20T06:09:47.387 回答
0

我建议这样做，这样元素就不会被不必要地解析。首先使用 html 创建一个字符串，然后将其添加到 dom 中。

var html = '';
$.each(data, function(index, store){
    html += '<tr>';
    $.each(store, function(key,value){
        html += '<td>'+value+'</td>';
    });
    html+= '</tr>';
}); 
$('#requests').append(html);
于 2013-08-20T06:32:52.023 回答
0

你能移动这条线吗

 $('#requests').append(row);

前

 $.each(store, function(key,value){
于 2013-08-20T05:57:59.540 回答
0 
 success : function(data){
        console.log(data);
        $.each(data, function(index, store){
         $('#requests').append(row);       
         $.each(store, function(key,value){
                $('#requests').append($("<td>").html(value));
              }); 
       $('#requests').append(nextrow);
       });
于 2013-08-20T06:18:56.067 回答