Javascript 通过Node.js使用AJAX登录POST请求_Javascript_Node.js_Ajax_Post_Xmlhttprequest

Javascript 通过Node.js使用AJAX登录POST请求

javascript node.js ajax post

Javascript 通过Node.js使用AJAX登录POST请求,javascript,node.js,ajax,post,xmlhttprequest,Javascript,Node.js,Ajax,Post,Xmlhttprequest,我正试图通过Node.js使用javascript发送一个AJAX POST登录页面请求，但是我真的不知道该怎么做。对不起，我对这件事还不熟悉。这是我的密码：在HTML中： <form> <label for="email"><b>Email Address</b></label><br> <input type="text" name="email"><br> <label fo

我正试图通过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>

路线：

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）谢谢

这是一个典型的问题，它涉及到如何以您意想不到的方式处理传递给服务器的信息

您的代码中有很多地方需要改进，但我现在不集中讨论这个问题。因此，首先，如果您注意在单击submit按钮后浏览器中发生的事情，您可以在URL上看到querystring格式的输入。并且它没有引用所描述的/login路由

比如：

http://localhost:3000/?email=marcelobraga%40hotmail.com&password=agoodpassword

这是因为默认情况下，表单元素使用这些参数与服务器通信。不是您期望通过HTTP请求对象接收的对象“Body”

如果您真的想访问作为URL参数传递的登录数据，您只需要在前端和后端修复代码，以正确传递对象，并准备服务器在正确的位置读取它

我强烈建议您不要以这种方式使用表单html元素。或者使用XMLHttpRequest。我建议使用Axios来处理HTTP请求，并发送正文信息，以避免像登录这样的敏感信息被显示出来。使用Axios的另一个原因是简单的语法和干净的代码

看看我是如何使用axios的：

在HTML中（我将插入所有HTML，您将看到Axios Lib标记的导入）：

在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!');
});

结论

您这样做的方式使得后端无法访问数据。后端希望收到信息，以便对请求的正文数据进行验证。您将其作为查询参数传递

您可以使用params或query params将信息传递到后端，但登录信息必须受到更大的保护。例如，将其发送到您的身体中，避免人们在您的历史记录中查找这些数据。这不是最安全的方法，因为有人可以在中间捕获这些数据。但是，无论如何，这是你应该知道的

希望我能帮助您。

您混淆了处理http请求的两种不同方法。你为什么不干脆用你的角形水疗呢。这要容易得多。

<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>

        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
        }
    )};

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!');
});