如何传递ON数据给服务器 (怎么把json传给服务器)
ON（JavaScript Object Notation）是一种轻量级的数据交换格式，在前端开发中广泛应用。当我们需要将ON数据传递给服务器时，需要遵循一些规则和技巧。本文将介绍如何在前端页面中传递ON数据给后端服务器。
一、ON格式
要传递ON数据，首先需要了解ON格式。ON数据由键和值对组成，用大括号‘{}’包围，每个键值对用冒号‘:’分隔，多个键值对用逗号‘,’隔开。值可以是字符串、数字、布尔值、数组、对象等数据类型。
例如：
“`
{
“name”: “Tom”,
“age”: 20,
“isStudent”: true,
“hobbies”: [“reading”, “music”, “sports”],
“address”: {
“province”: “Guangdong”,
“city”: “Shenzhen”
}
}
“`
二、XMLHttpRequest对象
在传递ON数据时，需要使用XMLHttpRequest（XHR）对象。XHR是一个在前端页面和后端服务器之间传递数据的工具。它能够向服务器发送请求并接收响应结果，实现前后端数据交互。
创建XHR对象的方法是：
“`
var xhr = new XMLHttpRequest();
“`
三、发送数据
在发送ON数据前，需要将数据序列化成字符串格式。可以使用ON.stringify()方法将ON对象转换为ON字符串。
下面是一个将ON数据发送到服务器的例子：
“`
var data = {
“name”: “Tom”,
“age”: 20,
“isStudent”: true,
“hobbies”: [“reading”, “music”, “sports”],
“address”: {
“province”: “Guangdong”,
“city”: “Shenzhen”
}
};
var xhr = new XMLHttpRequest();
xhr.open(‘POST’, ‘url’, true);
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send(ON.stringify(data));
“`
代码解析：
第1行：定义一个ON对象。
第2行：创建一个XHR对象。
第3行：使用open()方法打开一个POST请求，url参数为服务器地址，true参数表示使用异步请求。
第4行：设置XHR对象头部信息，Content-Type参数表示数据发送的格式为ON字符串。
第5~9行：设置XHR对象状态的回调函数，当请求完成后执行该函数。当readyState属性为4且status属性为200时，表示请求成功，这时可以从responseText属性中获取到服务器返回的数据。
第10行：调用send()方法将数据发送到服务器。send()方法的参数是一个字符串形式的ON数据。
四、接收数据
在服务器接收到ON数据后，需要使用某种方法将数据解析为ON对象。在服务器端使用各种语言和框架都有相应的解析方法。在JavaScript中，可以使用ON.parse()方法将ON字符串转换为ON对象。例如，在Node.js服务器中可以这么做：
“`
var http = require(‘http’);
var server = http.createServer(function(req, res) {
if(req.method === ‘POST’) {
var body = ”;
req.on(‘data’, function(data) {
body += data;
});
req.on(‘end’, function() {
var json = ON.parse(body);
console.log(json);
});
}
res.end();
});
server.listen(3000);
“`
代码解析：
第1~3行：引入http模块并创建一个HTTP服务器。
第4~13行：当请求方法为POST时，监听POST请求的数据流，将数据流中的数据累加到一个字符串中。
第14~16行：当数据流结束时，使用ON.parse()方法将字符串转换为ON对象。
第17行：输出ON对象到控制台，表示数据已经接收到。
第18行：结束响应，释放资源。
第19行：监听3000端口，等待客户端请求。
五、跨域访问
在实际应用中，如果服务器和前端页面的域名不同，就会遇到跨域问题。跨域问题是因为浏览器的同源策略所导致的，该策略要求在浏览器中访问的网页或脚本只能与其所属的源进行交互。
解决跨域问题的方法有很多，其中一种方法是在服务器端设置CORS（Cross Origin Resource Sharing）头部信息。例如，在Node.js服务器中设置CORS头部信息的方法如下：
“`
var http = require(‘http’);
var server = http.createServer(function(req, res) {
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’);
res.setHeader(‘Access-Control-Allow-Methods’, ‘GET, POST’);
res.setHeader(‘Access-Control-Allow-Headers’, ‘X-Requested-With, Content-Type’);
if(req.method === ‘POST’) {
var body = ”;
req.on(‘data’, function(data) {
body += data;
});
req.on(‘end’, function() {
var json = ON.parse(body);
console.log(json);
});
}
res.end();
});
server.listen(3000);
“`
代码解析：
第4~6行：设置CORS头部信息，允许所有来源（*）、所有方法（GET、POST）和自定义请求头信息（X-Requested-With、Content-Type）。
其它代码同前面的例子。
六、
本文介绍了如何在前端页面中传递ON数据给后端服务器，包括准备ON数据、创建XHR对象、发送数据、接收数据和处理跨域问题。当我们了解了ON格式和XHR对象的用法，就可以轻松地完成数据交互，实现数据传输和数据接收的功能。
