Question

我有一个ajax函数，它向api发送一个get请求并检索一些JSON，我在一个表中显示。这就是我试过的 -

<script>




function getInfo() {


     $.ajax({
         type: "GET",
         url: "http://example.com/",
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {

            for (var i=0;i<data.length;i++) {

            $("table.mytable").append("<tr><td>First Name</td><td>" + data[i].firstname + "</td></tr><tr><td>Last Name</td><td>" + data[i].lastname + 
            "</td></tr><tr><td>Queues</td><td>" + 
             data[i].skills +  "</td></tr>"  );
          }


             alert("success");
         },

         error: function (jqXHR, status) {
             // error handler
             console.log(jqXHR);
             alert('fail' + status.code);
         }
      });
   }


</script>

然而，html页面上的输出看起来像这样 -

名字约翰姓氏史密斯技能数学名字简姓氏史密斯技能数学

我希望表格中的名字，姓氏和技能标题与下面的数据相对应。知道怎么做吗？

Answer 1

用这个替换你的循环：

$("table.mytable").html("<tr><th>First Name</th><th>Last Name</th><th>Queues</th></tr>"  );

for (var i=0;i<data.length;i++) {
   $("table.mytable").append("<tr><td>" + data[i].firstname + "</td><td>Last Name</td><td>" + data[i].lastname + "</td><td>" + data[i].skills +  "</td></tr>"  );
}

整个ajax应该是这样的：

 $.ajax({
         type: "GET",
         url: "http://example.com/",
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {

            $("table.mytable").html("<tr><th>First Name</th><th>Last Name</th><th>Queues</th></tr>"  );

    for (var i=0;i<data.length;i++) {
       $("table.mytable").append("<tr><td>" + data[i].firstname + "</td><td>Last Name</td><td>" + data[i].lastname + "</td><td>" + data[i].skills +  "</td></tr>"  );
    }


             alert("success");
         },

         error: function (jqXHR, status) {
             // error handler
             console.log(jqXHR);
             alert('fail' + status.code);
         }
      });

在表格中正确显示json输出

1 个答案: