<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
账号<input type="text">
密码<input type="text">
<button>提交</button>
<script>
let userName = document.getElementsByTagName("input")[0];
let passWord = document.getElementsByTagName("input")[1];
let btn = document.getElementsByTagName("button")[0];
btn.onclick = () => {
let xhr = new XMLHttpRequest();//创建xhr对象通过XMLHttpRequest构造函数
xhr.onreadystatechange = () => {
if( xhr.readyState == 4 && xhr.status == 200 ){
//进了这里证明拿到了数据
console.log(xhr.responseText);
}
}
let datas = new FormData();
datas.append("userName",userName.value);
datas.append("passWord",passWord.value);
xhr.open("post","http://localhost:3000/index",true);
xhr.send(datas);
}
</script>
</body>
</html>
let express = require("express");
let bodyParser = require("body-parser");
//let multiparty = require("multiparty"); /*引入multiparty模块*/
//需要安装 npm install multiparty --save
let app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.all("*", function (req, res, next) {
//解决夸域问题
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", "3.2.1");
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// app.post("/index", (req, res) => {
// console.log(req.body);
// res.send("后台接收成功");
// });
app.post("/index", function (req, res) {
// let form = new multiparty.Form();
// form.parse(req, function (err, fields, file) {
// console.log(fields);
// res.send("数据已接收");
// });
console.log(req.body);
res.send("接收成功!");
});
app.listen(3000, () => {
console.log("3000链接成功");
});
后端拿不到前端传输过来的数据 老师 帮忙看看