在网页开发中，我们经常需要使用异步请求数据，例如在不刷新页面的情况下获取最新评论、搜索结果等。这时就需要使用 AJAX 技术。其中，使用 JSON（JavaScript Object Notation） 格式传输数据具有简单、轻量级、易于解析等优点，因此越来越被广泛采用。
下面我们就来介绍一下如何使用 AJAX 向服务器 POST JSON 数据。
// 1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 2.创建并发送请求
xhr.open('POST','/api/data');
xhr.setRequestHeader('Content-Type','application/json'); // 设置请求头
var requestData = {
name: '小明',age: 18
};
xhr.send(JSON.stringify(requestData));
// 3.处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 响应处理逻辑
var responseData = JSON.parse(xhr.responseText);
console.log(responseData);
}
};
代码解析：
首先，我们创建了一个 XMLHttpRequest 对象，它提供了向服务器异步发送 HTTP 请求的方法和属性。
接着，我们调用了 open() 方法，设置了请求方式（POST）和请求地址（'/api/data'）。同时，我们通过 setRequestHeader() 方法设置了请求头，告诉服务器请求数据的格式为 JSON。
然后，我们通过 JSON.stringify() 方法将请求数据转换为 JSON 格式字符串，并通过 send() 方法发送给服务器。
最后，我们通过 xhr.onreadystatechange 事件监听函数，监听服务器返回的响应结果。当 readyState 状态为 4（请求已完成）且 status 状态为 200（请求成功）时，我们可以通过 JSON.parse() 方法将响应结果转换为 JavaScript 对象，并进行相关处理。
总之，POST JSON 数据的过程就是以上这些，希望对大家有所帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
