ajax如何获取json数据并显示

使用Ajax可以通过发送HTTP请求获取JSON数据，然后将数据显示在网页上。以下是一个使用Ajax获取JSON数据并显示的示例：

// 创建一个XMLHttpRequest对象var xmlhttp = new XMLHttpRequest();// 设置请求的类型和URLxmlhttp.open("GET", "data.json", true);// 设置回调函数，处理响应结果xmlhttp.onreadystatechange = function() {if (this.readyState === 4 && this.status === 200) {// 请求成功，解析JSON数据var data = JSON.parse(this.responseText);// 显示数据displayData(data);}};// 发送请求xmlhttp.send();// 显示数据的函数function displayData(data) {// 在页面上创建一个<ul>元素var ul = document.createElement("ul");// 遍历数据，创建<li>元素，并将数据显示在<li>元素中for (var i = 0; i < data.length; i++) {var li = document.createElement("li");li.textContent = data[i].name + " - " + data[i].age;ul.appendChild(li);}// 将<ul>元素添加到页面中document.body.appendChild(ul);}

在这个示例中，我们使用XMLHttpRequest对象发送GET请求，请求的URL是"data.json"。当请求的状态改变时，会触发onreadystatechange事件，我们在该事件处理函数中判断请求的状态和响应的状态码是否成功。如果成功，我们使用JSON.parse()方法解析响应的JSON数据，并将解析后的数据传递给displayData()函数进行显示。

displayData()函数创建一个<ul>元素，然后遍历数据，创建<li>元素，并将数据显示在<li>元素中，最后将<ul>元素添加到页面中。

需要注意的是，如果你的数据不是来自同源的服务器（即数据的域名和网页的域名不一致），你需要在服务器端设置CORS（跨域资源共享）来允许跨域请求。