新闻资讯

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻资讯列表

ajax怎么获取json数据并显示,ajax怎么获取json数据

发布时间:2023-09-13 08:06:38

ajax怎样获得json数据并显示

使用Ajax可以通过发送HTTP要求获得JSON数据,然后将数据显示在网页上。以下是一个使用Ajax获得JSON数据并显示的示例:
```javascript
// 创建一个XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
// 设置要求的类型和URL
xmlhttp.open("GET", "data.json", true);
// 设置回调函数,处理响应结果
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 要求成功,解析JSON数据
var data = JSON.parse(this.responseText);
// 显示数据
displayData(data);
}
};
// 发送要求
xmlhttp.send();
// 显示数据的函数
function displayData(data) {
// 在页面上创建一个

    元素
    var ul = document.createElement("ul");
    // 遍历数据,创建
  • 元素,并将数据显示在
  • 元素中
    for (var i = 0; i < data.length; i++) {
    var li = document.createElement("li");
    li.textContent = data[i].name + " - " + data[i].age;
    ul.appendChild(li);
    }
    // 将
      元素添加到页面中
      document.body.appendChild(ul);
      }
      ```
      在这个示例中,我们使用`XMLHttpRequest`对象发送GET要求,要求的URL是"data.json"。当要求的状态改变时,会触发`onreadystatechange`事件,我们在该事件处理函数中判断要求的状态和响应的状态码是否是成功。如果成功,我们使用`JSON.parse()`方法解析响应的JSON数据,并将解析后的数据传递给`displayData()`函数进行显示。
      `displayData()`函数创建一个`
        `元素,然后遍历数据,创建`
      • `元素,并将数据显示在`
      • `元素中,最后将`
          `元素添加到页面中。
          需要注意的是,如果你的数据不是来自同源的服务器(即数据的域名和网页的域名不一致),你需要在服务器端设置CORS(跨域资源共享)来允许跨域要求。