使用ajax读取数据,并显示到网页中\n\n数据使用文本格式\n\n数据使用json格式
时间: 2023-04-28 16:01:00 浏览: 163
使用ajax取得数据
使用ajax读取数据,可以通过以下步骤实现:
1. 创建XMLHttpRequest对象
2. 设置请求方式和请求地址
3. 发送请求
4. 监听请求状态变化
5. 处理响应数据
如果数据使用文本格式,可以通过以下代码实现:
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.txt', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = xhr.responseText;
document.getElementById('content').innerHTML = data;
}
};
xhr.send();
```
如果数据使用json格式,可以通过以下代码实现:
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var html = '';
for (var i = ; i < data.length; i++) {
html += '<div>' + data[i].name + '</div>';
}
document.getElementById('content').innerHTML = html;
}
};
xhr.send();
```
其中,data.json文件内容如下:
```
[
{"name": "张三", "age": 18},
{"name": "李四", "age": 20},
{"name": "王五", "age": 22}
]
```
以上代码中,通过XMLHttpRequest对象发送GET请求,获取data.txt或data.json文件中的数据,并将数据显示在id为content的元素中。如果数据是json格式,需要使用JSON.parse()方法将字符串转换为json对象。最后,可以根据数据的格式,使用不同的方式处理数据并显示在网页中。
阅读全文