跨域获取json类型数据并渲染数据到页面
时间: 2023-12-24 07:05:29 浏览: 38
跨域获取json数据并渲染到页面可以通过以下步骤实现:
1. 在需要获取数据的页面,使用 JavaScript 创建一个 XMLHttpRequest 对象。
2. 设置 XMLHttpRequest 对象的请求方法和请求 URL。
3. 使用 XMLHttpRequest 对象发送请求。
4. 在服务器端,设置响应头 Access-Control-Allow-Origin,允许特定的域名请求数据。
5. 服务器端返回 JSON 格式的数据。
6. 在 JavaScript 中,使用 JSON.parse() 方法解析返回的 JSON 数据。
7. 将解析后的数据渲染到页面中。
以下是一个简单的示例代码:
```
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求方法和请求 URL
xhr.open('GET', 'http://example.com/data.json', true);
// 发送请求
xhr.send();
// 监听请求状态的变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析返回的 JSON 数据
var data = JSON.parse(xhr.responseText);
// 渲染数据到页面中
var list = document.getElementById('list');
for (var i = 0; i < data.length; i++) {
var item = document.createElement('li');
item.textContent = data[i].name;
list.appendChild(item);
}
}
};
```
需要注意的是,以上代码只是示例,并非完整的实现方式。在实际开发中,还需要考虑请求失败、JSON 数据格式错误等情况的处理。