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

时间:2015-12-07 19:24:04

标签: jquery json ajax

我正在尝试使用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已加载我已检查过,我在控制台中看不到任何错误。 但目前表中没有输出。 任何人都可以指出我哪里出错了吗?

7 个答案:

答案 0 :(得分: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);
       }
 })

答案 1 :(得分:1)

我找到问题的人:)

$.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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

你也可以这样做。我只是使用了样本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>

答案 5 :(得分:0)

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

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

答案 6 :(得分:-1)

试试这个

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