我正在尝试通过 Node 使用 javascript 发送登录页面的 AJAX POST 请求.js但我真的不知道该怎么做。对不起，我真的很陌生。这是我的代码：
在 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 }));
}
路线：
var user = [{
EmailAddress: 'anne@gmail.com',
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上看到查询字符串格式的键入输入。而且它没有引用描述的/login 路由。
像这样：
http://localhost:3000/?email=marcelobraga%40hotmail.com&password=agoodpassword
发生这种情况是因为默认情况下，Form 元素使用参数与您的服务器通信。不是您希望通过 HTTP 请求对象接收的对象"正文"。
如果您真的想访问作为 URL 参数传递的登录数据，您只需在前端和后端修复代码即可正确传递对象并准备服务器在正确的位置读取它。
我强烈建议您不要以这种方式使用 html 表单元素。要么使用 XMLHttpRequest。我建议使用 Axios 来处理 HTTP 请求并发送正文信息，以避免像登录这样的敏感信息可能是显式的。使用 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: 'anne@gmail.com',
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!');
});
结论
您执行此操作的方式使后端的数据无法访问。后端期望收到信息以继续验证请求的正文数据。您将其作为查询参数传递。
您可以使用参数或查询参数将信息传递到后端，但登录信息必须受到更多保护。例如，将其发送到您的体内可以避免人们在您的历史记录中找到这些数据。这不是最安全的方法，因为有人可以在中间捕获这些数据。但是，无论如何，这是你应该知道的。
我希望我能帮助你。