Question

我正在尝试从包含ID的网址发出web service来电。网址为http://10.173.143.252:8181/cxf/crm/customerservice/customers/125。

url发回json响应

{"id":125,"name":"John","password":"password","role":"user","privileges":["SMPP Balance Enquiry","Trigger SMPP Notification"],"status":"active"}

我的ajax-jQuery代码是：

$(document).ready(function() {
    jQuery.support.cors = true;

    $.ajax(
    {
         type: "GET",
         url: "http://10.173.143.252:8181/cxf/crm/customerservice/customers/125",
         data: "{}",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         cache: false,
         success: function (data) {
              $.each(data, function () {
                  $("#personDataTable tbody").append("<tr>"+"<td>"+data.id+"</td>"
                                 +"<td>"+data.name+"</td>"
                                 +"<td>"+data.password+"</td>"
                                 +"<td>"+data.role+"</td>"
                                 +"<td>"+data.privileges+"</td>"
                                 +"<td>"+data.status+"</td>"
                                 +"</tr>" )

    //     trHTML += '<tr><td>' + data.id[i] + '</td><td>' + data.name[i] + '</td><td>' + data.password[i] + '</td><td>' + data.role[i] + '</td><td>' + data.privileges[i] + '</td><td>' + data.status[i] + '</td></tr>';
    })
},
    error: function (msg) {

        alert(msg.responseText);
      }
   });
});

我的HTML看起来像：

<table class="table table-hover" id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>password</th>
        <th>role</th>
        <th>privileges</th>
        <th>status</th>
    </tr>
</table>

我的方法对我来说很合适。在一次重新加载时，表格可以填充6行相同数据的原因是什么？是的，我在google中经历过许多其他链接。

Answer 1

您必须首先解析json响应才能使用它

parsedData = JSON.parse(data);

用此

替换此行$.each(data.id, function (i, item) {

$.each(parsedData.id, function (i, item) {

Answer 2

var data = {
  "id": 125,
  "name": "John",
  "password": "password",
  "role": "user",
  "privileges": ["SMPP Balance Enquiry", "Trigger SMPP Notification"],
  "status": "active"
}

for (var key in data) {
  console.log(data[key])
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="personDataTable">

  <tr>
    <th>id</th>
    <th>name</th>
    <th>password</th>
    <th>role</th>
    <th>privileges</th>
    <th>status</th>

  </tr>

</table>

你可以获得这样的价值

Ajax-jquery调用填充表

2 个答案: