``
，// AJAX 获取 JSON 数据并在网页展示的简单示例代码：，，// 创建 XMLHttpRequest 对象，var xhr = new XMLHttpRequest();，，// 配置请求类型、URL 以及是否异步执行，xhr.open('GET', 'https://api.example.com/data', true);，，// 设置响应的数据类型为 JSON，xhr.responseType = 'json';，，// 注册一个监听函数，在请求完成时被调用，xhr.onload = function() {， if (xhr.status >= 200 && xhr.status< 300) {， // 请求成功，处理返回的 JSON 数据， var data = xhr.response;， document.getElementById('output').innerText = JSON.stringify(data);， } else {， // 请求失败，输出错误信息， console.error('请求失败:', xhr.statusText);， }，};，，// 发送请求，xhr.send();，``一、前端代码（HTML + JavaScript）
1、创建HTML文件：创建一个基本的HTML页面，包含一个用于显示数据的容器元素（如<div>）和一个按钮来触发数据获取操作。
Ajax与JSON数据获取示例 点击获取数据
2、编写JavaScript代码：在HTML文件中添加<script>标签，编写用于发送Ajax请求和处理响应的JavaScript代码。
document.getElementById('getDataBtn').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // 假设数据存储在当前目录下的data.json文件中
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
displayData(responseData);
}
};
xhr.send();
});
function displayData(data) {
var container = document.getElementById('dataContainer');
container.innerHTML = ''; // 清空容器内容
data.forEach(function(item) {
var p = document.createElement('p');
p.textContent = 'ID: ' + item.id + ', Name: ' + item.name + ', Age: ' + item.age;
container.appendChild(p);
});
}
二、JSON数据文件（data.json）
在同一目录下创建一个名为data.json的文件，并添加以下内容作为示例数据。
[
{ "id": 1, "name": "John", "age": 30 },
{ "id": 2, "name": "Jane", "age": 25 },
{ "id": 3, "name": "Doe", "age": 28 }
]
三、运行结果
当用户点击“点击获取数据”按钮时，浏览器会向服务器发送一个Ajax请求，请求data.json文件中的数据，服务器返回数据后，JavaScript代码会解析JSON格式的响应数据，并通过displayData函数将数据显示在网页上的<div id="dataContainer">元素中，每个数据项将显示为一个段落元素，包含用户的ID、姓名和年龄信息。
实例展示了如何使用Ajax与JSON在前端获取数据并显示在网页上的基本流程，你可以根据实际需求进行修改和扩展，例如改变请求方式、请求地址、处理不同的数据结构等。
各位小伙伴们，我刚刚为大家分享了有关“ajax与json 获取数据并在前台使用简单实例”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/844218.html
微信扫一扫 
