如何将 AJAX 与 JSON 结合使用

How to combine AJAX with JSON?

本文关键字：结合 JSON AJAX      更新时间：2023-09-26

>我正在尝试从JSON字符串中读取所有信息。我也在尝试在 AJAX 的帮助下阅读它。目的是用信息填充innerHTML，但没有任何效果。

代码有什么问题，如何解决？

function getResults() {
    var obj = [
      { "number": "Bob", "position": "forward", "shoots": "left" },
      { "number": "John", "position": "forward", "shoots": "right"  }
    ];

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var return_data = request.responseText;
            document.getElementById("sportresults").innerHTML = return_data;
        }
    };
    xhttp.open("GET", obj, true);
    xhttp.send();
}

让我们分解一些您可能会感到困惑的事情

首先，我认为你混淆了AJAX和JSON。AJAX（异步Javascript和XML）异步进行JavaScript调用，而JSON（JavaScript对象表示法）是一种数据格式。

在您的实例中，您无法调用以在您自己的代码中获取对象obj。您已经可以访问它，只需根据需要使用变量obj即可。

就写这个，

document.getElementById("sportresults").innerHTML = obj;

如果你确实需要发出请求获取JSON，obj值可以位于它自己的文件或路径中，你可以把它放在obj.json中。

假设您有一个名为 obj.json 的文件，如下所示

[
  { "number": "Bob", "position": "forward", "shoots": "left" },
  { "number": "John", "position": "forward", "shoots": "right"  }
]

然后，您可以像这样调用代码

function getResults() {
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        var return_data = request.responseText;
        document.getElementById("sportresults").innerHTML = return_data;
    }
 };
 xhttp.open("GET", 'obj.json', true);
 xhttp.send();
}

你应该将JSON写入文件，给出打开函数的文件路径

Open 的语法是空隙打开（ 多姆星法， DOMString url， 可选布尔异步， 可选的 DOMString 用户， 可选的多姆密码);

请参阅 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

相关文章：