javascript - Node.js Express 中的发布和重定向

Question

首先我要说的是，我是 Node.js 的新手。我在这里阅读了很多与我的问题相关的帖子，但它们要么对我不起作用，要么我不理解解决方案。 Nodes.js 目前对我来说相当棘手:/

这是我的疑问/问题:

我正在尝试找出 POST 处理和重定向过程，我想我错过了一些东西，因为它无法正常工作。

我正在编写一个单页应用程序，因此所有页面实际上都是分为多个部分的一页。

假设我有一个像这样的 HTML 表单(位于登录部分):

 <form method="post" action="/login">
    <input name="email" type="email" id="signin-mail">
    <input name="pass" type="password" id="signin-username">
    <input type="submit" value="send">
 </form>

这是我的 Node.js 服务器代码:

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var app = express();

app.use(bodyParser()); 

//
app.get('/login', function(req, res){
    console.log('GET /')
    var html = fs.readFileSync('index.html');
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
});

//
app.post('/login', function(req, res){
    console.log('POST /');
    console.dir('email: ' + req.body.email +  ' pass: ' + req.body.pass);
    res.status(200).redirect("/index.html#index");
});

app.use(express.static(__dirname + '/'));

port = 8888;
app.listen(port);
console.log('Listening at http://localhost:' + port)

现在，基本上，除了阅读表格内容之外，我不想做任何事情，并且将用户重定向到另一个页面。我在终端中看到表单数据已正确解析，并且打印了用户名和密码，但地址并未重定向到页面的 #index 部分，而是更改为 localhost/login。

有人可以解释一下接收帖子、提取数据和重定向用户的整个过程吗？

谢谢!

Answer 1

您需要使用客户端 javascript 和 ajax 来实现此目的。您可以使用jquery的post方法手动提交表单，而不是依赖

的action属性像这样的事情:

$('#myForm').submit(function(event) {
    event.preventDefault(); // Stops browser navigationg

    var dataObject;
    // build a json object, store in information to dataObject

    $.post('/login', dataObject, function(res) {
        consolel.log(res);
        // on success execute this code
    });
});

更新:

或者，如果您或这里的其他人也愿意进行文件上传，那么您可以使用以下代码:

 $("#myForm").submit(function(event){    
 event.preventDefault();

 var formData = new FormData($(this)); 

     $.ajax({
       url: 'login',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
           console.log(response);
       }
    });

   return false;
 });

说明

在提交表单事件时，停止默认操作。然后我们创建一个新的 formData 并传递表单的this。传递ajax请求，带上url、request-method等参数