原生ajax获取json数据并显示
时间: 2024-05-10 09:17:08 浏览: 7
以下是一个简单的示例:
HTML代码:
```
<div id="output"></div>
```
JavaScript代码:
```
var xmlhttp = new XMLHttpRequest();
var url = "data.json";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
displayData(data);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function displayData(data) {
var output = document.getElementById("output");
for (var i = 0; i < data.length; i++) {
var item = data[i];
output.innerHTML += "<h2>" + item.title + "</h2>";
output.innerHTML += "<p>" + item.content + "</p>";
}
}
```
在此示例中,我们首先创建了一个XMLHttpRequest对象,并指定了要获取的JSON数据的URL。然后,我们设置了一个回调函数,在XMLHttpRequest对象的readyState状态为4且status为200时会执行该函数。在回调函数中,我们解析JSON数据并将其传递给一个名为displayData的函数。该函数使用解析的数据创建HTML元素并将它们添加到页面上的一个名为output的DIV元素中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)