Question

我有一个从php脚本查询的mysql表中的json数据。 json数据正确地如下：

{
"report": [{
    "Mes": "Abril",
    "Dia": "13",
    "Local": "Lisboa",

}]
}

我尝试使用此代码将数据导入html表。但是，因为我是一个菜鸟，所以我不知道为什么不工作。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>
    $.getJSON("http://ib.esy.es/_php/select_comissao1.php",
    function (data) {
        var tr = data.report
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].Mes + "</td>");
            tr.append("<td>" + data[i].Dia + "</td>");
            tr.append("<td>" + data[i].Local + "</td>");
            $('.table1').append(tr);
        }
    });
    </script>

    <table class="table1">
        <tr>
            <th>Mes</th>
            <th>Dia</th>
            <th>Hora</th>
        </tr>
    </table>

有人可以帮助我吗？

Answer 1

既然你说JSON正在回归，并且假设问题中的对象结构是正确的，那么我会发现一些事情：

1）我不明白为什么这行var tr = data.report在代码中。您正在为获取的数据设置tr，然后在循环中使用jquery对象覆盖它。

2）您无法从JSON中获取数据的原因是data是您对象的根。您尝试写入表的数据位于顶级report对象中的data属性中。您可以将您的javascript更新为：

for (var i = 0; i < data.report.length; i++) {
  var tr = $('<tr/>');
  $(tr).append("<td>" + data.report[i].Mes + "</td>");
  $(tr).append("<td>" + data.report[i].Dia + "</td>");
  $(tr).append("<td>" + data.report[i].Local + "</td>");
  $('.table1').append(tr);
}

使用前面的代码，您正在索引到不是数组的data对象。此更新确保索引发生在report属性上，该属性是一个数组。

<强>示例

$(document).ready(function() {
  // Using the JSON format from your question
  var data = {
    "report": [{
        "Mes": "Abril",
        "Dia": "13",
        "Local": "Lisboa",

    }]
  };

  // Loop through data.report instead of data
  for (var i = 0; i < data.report.length; i++) {
    var tr = $('<tr/>');
    
    // Indexing into data.report for each td element
    $(tr).append("<td>" + data.report[i].Mes + "</td>");
    $(tr).append("<td>" + data.report[i].Dia + "</td>");
    $(tr).append("<td>" + data.report[i].Local + "</td>");
    $('.table1').append(tr);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
  <tr>
    <th>Mes</th>
    <th>Dia</th>
    <th>Hora</th>
  </tr>
</table>

Answer 2

你非常接近。通过JavaScript发送异步请求时，您需要将请求发送到与您的域名相关的路径。在这种情况下，它应该是/_php/select_comissao1.php。只需从请求路径中删除您的域名（http://ib.esy.es）即可。

<强>的index.php

<!DOCTYPE html>
<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
       /**
         * Replace "http://ib.esy.es/_php/select_comissao1.php" with a relative path.
         * 
         * In this case, it should be "/_php/select_comissao1.php"
         */
        $.getJSON("/_php/select_comissao1.php",
            function (data) {
                var tr = data.report
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].Mes + "</td>");
                    tr.append("<td>" + data[i].Dia + "</td>");
                    tr.append("<td>" + data[i].Local + "</td>");
                    $('.table1').append(tr);
                }
            });
    </script>

    <table class="table1">
        <tr>
            <th>Mes</th>
            <th>Dia</th>
            <th>Hora</th>
        </tr>
    </table>
</body>
</html>

更新

如果您的应用程序未在http://ib.esy.es上运行，则可以使用JSONP执行跨域ajax请求。

示例

<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script> $.ajax({ url: "http://ib.esy.es/_php/select_comissao1.php", type: "post", dataType: "jsonp", //jsonp allows cross-domain ajax requests. success: function (data) { var tr = data.report for (var i = 0; i < data.length; i++) { tr = $('<tr/>'); tr.append("<td>" + data[i].Mes + "</td>"); tr.append("<td>" + data[i].Dia + "</td>"); tr.append("<td>" + data[i].Local + "</td>"); $('.table1').append(tr); } } }); </script> <table class="table1"> <tr> <th>Mes</th> <th>Dia</th> <th>Hora</th> </tr> </table> </body> </html>

Answer 3

<强> SOLUTION：

最后是工作代码。它必须是我从php推送数据的方式。小/大差异是 .then

$.getJSON("http://ib.esy.es/select_comissao1.php").then(function(data)
{console.log(data);

   var tr = data
    for (var i = 0; i < data.report.length; i++) {
    var tr = $('<tr/>');

    // Indexing into data.report for each td element
    $(tr).append("<td>" + data.report[i].Mes + "</td>");
    $(tr).append("<td>" + data.report[i].Dia + "</td>");
    $(tr).append("<td>" + data.report[i].Local + "</td>");
    $('.table1').append(tr);
    }

});

获取json数据到html表

3 个答案:

更新