Ajax不同页面传json

Ajax是一种用于在网页上异步加载数据的技术。通过Ajax，可以在不刷新整个页面的情况下，获取新的数据并将其显示在当前页面上，从而提升用户的体验。在Ajax中，常使用Json格式来传输数据，Json就是一种轻量级的数据交换格式，非常适合在网络上传输数据。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        //处理返回的数据
    }
}
xhr.open('GET','http://example.com/getData',true);
xhr.send();

在Ajax中，可以通过不同的方式来传输Json数据。下面将分别介绍在同一页面和不同页面中传输Json数据的方式。

1. 同一页面

在同一页面中，传输Json数据非常简单。可以使用JavaScript中的对象来存储Json数据，并通过Ajax将其发送到后端进行处理。

//创建一个对象，存储Json数据
var data = {
    name: '张三',age: 18,sex: '男'
};
//将对象转换为Json字符串
var jsonData = JSON.stringify(data);

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.responseText);
        //处理返回的数据
    }
}
xhr.open('POST','/api/saveData',true);
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(jsonData);

2. 不同页面

在不同页面中，需要通过Url参数或请求头来传输Json数据。可以使用JavaScript中的encodeURI和decodeURI函数来对Url参数进行编码和解码。

//创建一个对象，存储Json数据
var data = {
    name: '张三',sex: '男'
};
//将对象转换为Json字符串并进行Url编码
var jsonData = encodeURI(JSON.stringify(data));

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.responseText);
        //处理返回的数据
    }
}
xhr.open('GET','http://example.com/getData?jsonData=' + jsonData,true);
xhr.send();

以上就是在Ajax中不同页面传输Json数据的两种方式。通过这些方式，可以实现对后端数据的异步读取和修改，让页面变得更加动态和丰富。