Question

我正在尝试使用ajax在表中显示来自URL的Json数据。我希望代码循环遍历数据并将其输出到表中。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #Results{
            margin-right: auto;
            margin-left: auto;
            border: 1px solid black;
            width: 80%;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        tr:hover{background-color:#f5f5f5}

    </style>
<script type="text/javascript">
   $(document).ready(function(){
       $.getJSON("URL", null,   
       function (json) {
           var tr;
           for (var i = 0; i < json.length; i++) {
               tr = $('<tr/>');
               tr.append("<td>" + json[i].data1 + "</td>");
               tr.append("<td>" + json[i].data2 + "</td>");
               tr.append("<td>" + json[i].data3 + "</td>");
               tr.append("<td>" + json[i].data4 + "</td>");
               $('result').append(tr);
           }
       })

   });
</script>

    <title></title>
</head>
<body>
<div id="Results">

<table id="result">

    <tr>
        <th>
            data1
        </th>
        <th>
            data2
        </th>
        <th>
            data3
        </th>
        <th>
            data4
        </th>
    </tr>

</table>

</div>
</body>
</html>

我的Jquery已加载我已检查过，我在控制台中看不到任何错误。但目前表中没有输出。任何人都可以指出我哪里出错了吗？

Answer 1

你应该成功回调。您的JS代码应如下所示。

$.getJSON("URL", null, function(json){
       var tr;
       for (var i = 0; i < json.length; i++) {
           tr = $('<tr/>');
           tr.append("<td>" + json[i].data1 + "</td>");
           tr.append("<td>" + json[i].data2 + "</td>");
           tr.append("<td>" + json[i].data3 + "</td>");
           tr.append("<td>" + json[i].data4 + "</td>");
           $('#result').append(tr);
       }
 })

Answer 2

我找到问题的人：）

$.getJSON("URL", function(json){
       var tr;
       for (var i = 0; i < json.length; i++) {
           tr = $('<tr/>');
           tr.append("<td>" + json[i].data1 + "</td>");
           tr.append("<td>" + json[i].data2 + "</td>");
           tr.append("<td>" + json[i].data3 + "</td>");
           tr.append("<td>" + json[i].data4 + "</td>");
           $('#result').append(tr);
       }
 })

错过了结果中的＃：D

Answer 3

应该是 $('#result').html(tr);

Answer 4

如果您使用的是id，则应使用＃作为直接ID，例如

$('#result').append(tr);

Answer 5

你也可以这样做。我只是使用了样本json但是

 var json = [ {data1:"Toyota", data2:"Dodge",data3:"Honda", data4:"Mazda" } ];

                 var Cars = [];

                Cars.push('<tr><th> data1  </th>  <th>  data2 </th>  <th>  data3  </th>  <th>  data4  </th> </tr>');
               for (var i = 0; i < json.length; i++) {
                   Cars.push('<tr>');

                  Cars.push("<td>" + json[i].data1 + "</td>");
                  Cars.push("<td>" + json[i].data2 + "</td>");
                  Cars.push("<td>" + json[i].data3 + "</td>");
                  Cars.push("<td>" + json[i].data4 + "</td>");

                  Cars.push('<tr>');

               }
                $('#result').html(Cars);

在你的html中，它会像这样的空白表：

<table id="result">



</table>

Answer 6

我认为您需要记录您的代码..

尝试记录此数据console.log（json [i]）。然后检查是否显示任何数据或错误。

Answer 7

试试这个

 $('result').html(tr);

使用Ajax获取Json数据没有显示数据

7 个答案: