Question

我必须在Json中检索数据，然后在表格中显示它。我尝试了几种方法，但它们没有用。这是我的这个函数的代码，有人可以帮我弄清楚这段代码有什么问题，因为我没有显示任何内容，也没有错误。谢谢

代码已更新。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<h1>display the menu</h1>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     
    var obj = JSON.parse(this.responseText);
  
  var html = "<table border='1|1'>";

  for (var i = 0; i < obj.response.length; i++) {
          html+="<tr>";
          html+="<td>"+obj.response[i].id+"</td>";
          html+="<td>"+obj.response[i].restaurant_id+"</td>";
          html+="<td>"+obj.response[i].name+"</td>";
          html+="</tr>";

       }

   html+="</table>";
  $("div").html(html);
}

  };
  xhttp.open("GET", "http://deleted url sorry", true);
  xhttp.send();

}
</script>

</body>
</html>

我必须在Json中检索数据，然后在表格中显示它。我尝试了几种方法，但它们没有用。这是我的这个函数的代码，有人可以帮我弄清楚这段代码有什么问题。谢谢

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<h1>display the menu</h1>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    var obj = JSON.parse(this.responseText);
   //document.getElementById("demo").innerHTML = obj.response[0].id + " " + obj.response[0].restaurant_id + " "+ obj.response[0].name;

}

var count = 0;
var html = "<table border='1|1'>";
for (var k in obj) {
    if (obj.hasOwnProperty(k))
    {  ++count; }
//document.getElementById("demo").innerHTML = obj.response[count].id + " " + obj.response[count].restaurant_id + " "+ obj.response[count].name;



        html+="<tr>";
        html+="<td>"+obj.response[count].id+"</td>";
        html+="<td>"+obj.response[count].restaurant_id+"</td>";
        html+="<td>"+obj.response[count].name+"</td>";
        html+="</tr>";

     }

 html+="</table>";
$("div").html(html);
  };
  xhttp.open("GET", "the URL I deleted it when posting", true);
  xhttp.send();


}
</script>

</body>
</html>

感谢您的帮助。

Answer 1

当你执行$（＆＃39; div＆＃39;）。html（）.... div元素不存在于页面中，因此不会呈现任何内容

Answer 2

请原谅我，如果我误解了，我没有链接可以复制。

我的代码中有一些注意事项：

您的数据明确传递给p，因为它是在AJAX回调中分配的。
您使用了For in循环而不是For和迭代器，尽管您实际上正在迭代一组对象。
页面上没有$('div') html变量将任何内容放入其中。

这是对您的脚本的更新，应该可以正常工作：

function myFunction() {

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

            var html = null;

            html += '<tr>';
            html += '<td>' + data[i].id + '</td>';
            html += '<td>' + data[i].restuarant + '</td>';
            html += '<td>' + data[i].name + '</td>';
            html += '</tr>';

            $('#demo').html(html);

        }
    } 



    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myOtherFunction(JSON.parse(this.responseText));
        }
    }

    xhttp.open("GET", "the URL I deleted it when posting", true);
    xhttp.send();

}

（如果您只是希望在页面加载时发生这种情况，您甚至可以删除父myFunction()，但我仍然建议将其包装在$(document).ready()中。

另外，考虑使用document.createElement和.append()（后者在jQuery中，前者是核心JS）来动态创建元素而不是传入大型DOM字符串的可能性。）

然后，您需要记住为您的table添加一个<tr></tr>元素，其中包含要放入其中的表数据/ JSON数据。

<!DOCTYPE html>
<html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>

        <h1>display the menu</h1>

        <button type="button" onclick="loadDoc()">Request data</button>

        <table>
            <thead>
                <tr>
                    <td>Your Header</td>
                    <td>Your Header</td>
                    <td>Your Header</td>
                    <td>Your Header</td>
                </tr>
            </thead>
            <tbody id="demo">

            </tbody>
        </table>
    </body>
</html>

Answer 3

这是正确的答案。正如kim82回答我的那样，页面中不存在div元素。我刚刚添加了它。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<h1>display the menu</h1>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
<div >

</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     //document.getElementById("demo").innerHTML = this.responseText;
    var obj = JSON.parse(this.responseText);
   //document.getElementById("demo").innerHTML = obj.response[0].id + " " + obj.response[0].restaurant_id + " "+ obj.response[0].name;
  // document.getElementById("demo").innerHTML = obj.response.length
  var html = "<table border='1|1'>";

  //document.getElementById("demo").innerHTML = obj.response[count].id + " " + obj.response[count].restaurant_id + " "+ obj.response[count].name;
  for (var i = 0; i < obj.response.length; i++) {
          html+="<tr>";
          html+="<td>"+obj.response[i].id+"</td>";
          html+="<td>"+obj.response[i].restaurant_id+"</td>";
          html+="<td>"+obj.response[i].name+"</td>";
          html+="</tr>";

       }

   html+="</table>";
  $("div").html(html);
}

  };
  xhttp.open("GET", "http://url deleted", true);
  xhttp.send();

}
</script>

</body>
</html>

无法使用json对象

3 个答案: