In the previous section, we learned the processing of form data, and in this section, we learned how to submit data in Ajax
The server code is as follows
const http = require("http");
const url = require("url");
const querystring = require("querystring");
let server = http.createServer();
server.on("request", (req, res) => {
let {
pathname } = url.parse(req.url);
// 1）配置跨域
// 配置跨域头允许任何网站访问
res.setHeader("Access-Control-Allow-Origin", "*");
// 允许携带header
res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
// 默认支持 get 和 post
res.setHeader("Access-Control-Allow-Methods", "GET,POST");
// 遇到 OPTIONS 预检请求，直接成功即可
if (req.method === "OPTIONS") {
res.statusCode = "200";
res.end();
}
// 2）解析请求体
const arr = [];
req.on("data", (chunk) => {
arr.push(chunk);
});
req.on("end", () => {
let result = Buffer.concat(arr).toString();
console.log("result---->", result);
let obj;
if (req.headers["content-type"] === "application/x-www-form-urlencoded") {
obj = querystring.parse(result, "&", "=");
} else if (req.headers["content-type"] === "application/json") {
obj = JSON.parse(result);
}
console.log("obj---->", obj);
// 3）根据不同路径返回对应内容
if (pathname === "/login" && req.method == "POST") {
res.setHeader("Content-Type", "application/json");
res.end("登录成功");
}
if (pathname === "/regist" && req.method == "POST") {
res.setHeader("Content-Type", "application/json");
res.end(JSON.stringify(obj));
}
});
});
server.listen(3000);
The page request logic is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>凯小默测试对象的处理</title>
</head>
<body>
<form action="http://localhost:3000/login" method="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" />
<input type="text" name="password" />
<button type="submit">提交</button>
</form>
<hr />
<button id="btn">注册提交数据</button>
<script>
// 默认如果域名，端口号，协议不一致会有跨域问题
btn.addEventListener("click", () => {
// ajax 4部曲 1.创建 xhr 对象 2.开启请求 3.发送请求 4.监听状态变化
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/regist", true); // 异步提交
xhr.setRequestHeader("Content-Type", "application/json");
// 浏览器自动将相应的结果转化为对象
xhr.responseType = "json";
xhr.send(
JSON.stringify({
name: "kaimo",
age: 313
})
);
// xhr.readyState == 4 && xhr.status == 200
xhr.onload = function () {
console.log(xhr.response);
};
});
</script>
</body>
</html>
Start the service, click Submit to see that the request is successful, or you can try to remove the cross-domain header yourself
nodemon "67 # 对象的处理.js"
