使用Ajax可以通过发送HTTP请求获取JSON数据,然后将数据显示在网页上。以下是一个使用Ajax获取JSON数据并显示的示例:
// 创建一个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 = https://www.yisu.com/ask/JSON.parse(this.responseText);>元素 var ul = document.createElement("ul"); // 遍历数据,创建
- 元素添加到页面中
document.body.appendChild(ul);
}
在这个示例中,我们使用XMLHttpRequest
对象发送GET请求,请求的URL是"data.json"。当请求的状态改变时,会触发onreadystatechange
事件,我们在该事件处理函数中判断请求的状态和响应的状态码是否成功。如果成功,我们使用JSON.parse()
方法解析响应的JSON数据,并将解析后的数据传递给displayData()
函数进行显示。
displayData()
函数创建一个
元素,然后遍历数据,创建元素,并将数据显示在
元素中,最后将
元素添加到页面中。
需要注意的是,如果你的数据不是来自同源的服务器(即数据的域名和网页的域名不一致),你需要在服务器端设置CORS(跨域资源共享)来允许跨域请求。