我想通过Node.js使用javascript为一个登录页面发送AJAX POST请求，但是我真的不知道该怎么做。对不起，我真的是新手。下面是我的代码。
在HTML中：
<form>
<label for="email"><b>Email Address</b></label><br>
<input type="text" name="email"><br>
<label for="password"><b>Password</b></label><br>
<input type="text" name="password"><br><br>
<input type="submit" class = "button" value="Login" onclick= "submitlogin()">
</form>
在JS中：
function submitlogin(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState ==4 && this.status == 200){
console.log("success");
} else if (this.readyState == 4 && this.status == 401) {
console.log("Failed");
}
};
xhttp.open("POST","/login",true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify({ email: this.email, password: this.password }));
}
Route:
var user = [{
EmailAddress: '[email protected]',
Password: 'first'
}]
router.post('/login', function(req, res, next) {
if((req.body.email === user[0].EmailAddress) && user[0].Password === req.body.password){
res.status(200).send();
} else {
res.status(401).send();
}
});
xhttp.send()中应该写什么？我做错了什么？谁能帮我解决这个问题？(最好是javascript而不是jQuery) 谢谢!
这是一个典型的问题，关于如何处理传递给服务器的信息 用一种你意想不到的方式。
在你的代码中，有很多东西需要改进，但我现在不会关注这个。所以，首先，如果你注意浏览器中在点击提交按钮后发生的情况，在URL上你可以看到输入的信息是querystring格式的。而且它并没有引用描述的登录路径。
类似这样的情况。
http://localhost:3000/?email=marcelobraga%40hotmail.com&password=agoodpassword
这是因为表单元素，默认情况下， 使用参数与服务器通信。而不是你期望通过HTTP Request对象接收的对象 "Body"。
如果你真的想访问作为URL参数传递的登录数据，你只需要在你的前台和后台修改你的代码，以正确传递对象，并准备你的服务器在正确的地方读取它。
我强烈建议你不要用这种方式使用表单html元素。要么使用XMLHttpRequest。我建议使用Axios来处理HTTP请求，并发送Body信息，以避免明确的敏感信息，如登录可能是。使用Axios的另一个原因是简单的语法和干净的代码。
看看我是如何用Axios做的。
在HTML中（我将插入所有的HTML，让你看到Axios Lib标签的导入）。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- importing axios to this document -->
<title>Document</title>
</head>
<body>
<label for="email"><b>Email Address</b></label><br>
<input type="text" id="email" name="email"><br>
<label for="password"><b>Password</b></label><br>
<input type="text" id="password" name="password"><br><br>
<input type="submit" class="button" value="Login" onclick="submitlogin()">
</body>
</html>
在JS文件中。
const emailInput = document.getElementById("email").value //getting the value from input typed
const passwordInput = document.getElementById("password").value //getting the value from input typed
axios.post('/login',
{
email: emailInput,
password: passwordInput
}
)};
在 expressjs 中。
const express = require("express")
const app = express();
const path = require('path');
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.post('/login', (req, res) => {
console.log(req.body); //console to verify the body data received on this endpoint request
const user = [{
EmailAddress: '[email protected]',
Password: 'first'
}];
if((req.body.email === user[0].EmailAddress) && user[0].Password === req.body.password){
res.status(200).send("Success");
console.log("Success");
} else {
res.status(401).send("Wrong email or password");
console.log("Wrong email or password");
}
});
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
结束语
你这样做的方式使得数据在后端无法到达。后台希望收到信息，以便对请求的主体数据进行验证。而你是把它作为一个查询参数来传递的。
你可以使用参数或者查询参数向后台传递信息，但是登录信息一定要加强保护。比如在body中发送，避免别人在你的历史记录中找到这些数据。这不是最安全的方式，因为有人可以在中间抓到这个数据。但是，无论如何，是你应该知道的事情。
我希望我可以帮助你。