Ajax（Asynchronous JavaScript and XML）技术是一种使用JavaScript和XML进行异步数据交换的技术。该技术常被用于无需刷新整个页面的情况下，更新部分页面内容。本文介绍如何使用Ajax提交并传输JSON数据。
使用Ajax提交JSON数据的步骤如下：
<script>
var data = {"name": "Tom","age": 20};
var json = JSON.stringify(data);
var xhr = new XMLHttpRequest();
xhr.open('POST','/postJson');
xhr.setRequestHeader('Content-Type','application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response);
}
};
xhr.send(json);
</script>
首先创建一个JSON数据对象，并使用JSON.stringify()方法将其转换为字符串。接着创建一个XMLHttpRequest对象，使用open()方法打开POST请求，并设置请求的地址为/postJson。使用setRequestHeader()方法将Content-Type设置为application/json，这样可以确保服务器能正确处理请求的数据类型。设置XMLHttpRequest的onreadystatechange事件，当请求状态（readyState）为4并且响应状态（status）为200时，将服务器响应的内容输出到控制台。最后使用send()方法将JSON数据发送到服务器。
服务器接收到JSON数据后，需要使用JSON.parse()方法将其转换为对象进行处理。
var bodyParser = require('body-parser');
var express = require('express');
var app = express();
app.use(bodyParser.json());
app.post('/postJson',function(req,res) {
var data = req.body;
console.log(data);
res.send('OK');
});
app.listen(3000);
使用Node.js和Express框架作为后端服务器。在代码中使用body-parser模块将请求的JSON数据解析为对象，并在控制台输出数据。最后使用res.send()方法返回一个字符串“OK”，表示处理完请求。
通过以上代码，我们可以实现在浏览器中向服务器提交JSON数据，并处理服务器响应。使用Ajax提交JSON数据可以使网页更加便捷和快速，提高用户体验。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
