Question

我正在尝试将Node js中的JSON发送到html文件作为响应，但是在我提交HTML表单后消失了，这显示为Respond after I submit a form。我尝试了ajax，但由于将其重定向到此位置而无法正常工作（上图）。我正在尝试制作一个简单的登录表单，如果用户未输入任何内容，则应在表单下方显示“未输入任何内容”的消息。

JS代码（node.js，快速框架）

app.get('/login', function(req, res){
    res.sendFile(path.join(__dirname+'/Frontend/html/login.html'));
});

app.post('/login', function(req, res){
    res.json({a: 5});
});

html代码

 <form method="POST">
    <input type = "text" name = "username" id = "username" placeholder="Username">
    <input type = "password" name = "password" id = "password" placeholder="Password">
    <button id = "gumb" type = "submit">Prijavi se</button>
</form>
<p id = "demo"></p>
<script>
    document.getElementById('gumb').addEventListener('click', function(){
        const xhr = new XMLHttpRequest();

        console.log("test");

        if(xhr.readyState == 4 && xhr.status == 200){
           document.write(xhr.responseText);
        }
        else{
            console.log("broke");
        }

        xhr.open('get', 'http://localhost:8000/login', true);
    });
</script>

Answer 1

您的代码按预期工作，在调用路由时，您只需将JSON键值对发送到前端。数据显示在浏览器中。

app.post('/login', function(req, res){
    res.json({a: 5});
});

通常，您希望对发送到后端的数据做些事情：

app.post('/login', function(req, res){
  user= req.body.username;
  password = req.body.password;
  console.log(`User: ${user} is requesting login`);
  // do something with the data - login, save, edit
  res.end();
});

由于您显然是在提交登录数据（从表单到后端），您应该使用一些身份验证中间件来执行登录。

要舒适地将经过处理的html发送到您的后端，您应该熟悉视图的主题。

我相信，Express api文档将对您非常有用。 ;）

https://expressjs.com/en/api.html

如何将JSON作为响应从Node JS发送到HTML文件

1 个答案: