Question

我试图将我的JSON从URL转换为HTML表，但结果是HTML表格变为空白。

我将JSON文件存储在http://bayuyanuargi.000webhostapp.com/myfile.json中，下面是我使用的代码：

<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
  <script>
    $(function() {

      var result = [];
      var dmJSON = "http://bayuyanuargi.000webhostapp.com/myfile.json?callback=?";
      $.getJSON(dmJSON, function(data) {
        $.each(data.result, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.address.name + "</td>" + "<td>" + f.address.street + "</td>" + "</tr>"
          $(tblRow).appendTo("#resultdata tbody");
        });

      });

    });
  </script>
</head>
<body>
  <div class="wrapper">
    <div class="profile">
      <table id="resultdata" border="1">
        <thead>
          <th>Name</th>
          <th>Street</th>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

Answer 1

?callback=的存在使jQuery以JSONP的形式执行请求。您的网页仅返回JSON，而不是JSONP 。

From jQuery.getJSON() docs：

JSONP 如果URL包含字符串“callback=?”（或类似的，由服务器端API定义），则该请求将被视为JSONP。有关详细信息，请参阅jsonp中$.ajax()数据类型的讨论。

解决方案：从网址中删除callback=?。

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script>
    $(function() {
      var CORS = "https://cors-anywhere.herokuapp.com/" // for testing purposes, only
      
      var result = [];
      var dmJSON = CORS + "https://bayuyanuargi.000webhostapp.com/myfile.json";
      $.getJSON(dmJSON, function(data) {
        $.each(data.result, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.address.name + "</td>" + "<td>" + f.address.street + "</td>" + "</tr>"
          $(tblRow).appendTo("#resultdata tbody");
        });

      });

    });
  </script>
</head>

<body>

  <div class="wrapper">
    <div class="profile">
      <table id="resultdata" border="1">
        <thead>
          <th>Name</th>
          <th>Street</th>

        </thead>
        <tbody>

        </tbody>
      </table>

注意：返回JSON（而不是JSONP）的常规Ajax调用受regular CORS restrictions的约束。我在上面的演示中添加了一个解决方法，仅用于演示目的。在具体情况下，要么将页面/脚本部署在服务器的同一主机上，要么添加necessary headers to the server。

将JSON转换为HTML表

1 个答案: