ajax关联json文件

AJAX（Asynchronous JavaScript and XML）可以使网页实现无需从服务器获取全部页面刷新，以及在后台与服务器进行数据交换而无需干扰正在浏览的页面。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。下面介绍如何使用AJAX关联JSON文件。

ajax关联json文件

首先，创建一个存储JSON数据的文件，比如我们创建一个person.json文件。在person.json文件中，我们可以输入以下数据：

{
   "name":"张三","age":20,"gender":"男"
}

接着，在HTML页面上设置一个按钮，当用户点击该按钮时，可以通过AJAX获取JSON文件中的数据。下面是HTML页面的代码：

当用户点击按钮时，会触发函数loadJSON()。下面是JavaScript代码：

function loadJSON() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         var obj = JSON.parse(this.responseText);
         document.getElementById("demo").innerHTML =
         "姓名：" + obj.name + "
年龄：" + obj.age + "
性别：" + obj.gender;
      }
   };
   xhttp.open("GET","person.json",true);
   xhttp.send();
}

在这段代码中，我们使用XMLHttpRequest对象来异步获取JSON文件中的数据。在异步请求的状态等于4和请求的状态码等于200时，说明服务器已经成功响应请求，并且我们可以通过JSON.parse()将JSON数据转换成JavaScript对象。最后，我们在HTML页面上展示数据。

这就是使用AJAX关联JSON文件的基本步骤。我们可以根据需要修改JSON文件和JavaScript代码，实现更复杂的数据交互。

ajax关联json文件

相关文章