在Node.js Express中發佈和重定向

讓我開始說我是Node.js中的完全新手。我在這裏閱讀了很多與我的問題相關的帖子，但他們要麼不適合我，要麼我不瞭解解決方案。 Nodes.js對我來說是相當棘手的時刻：/在Node.js Express中發佈和重定向

因此，這裏是我的問題/問題：

我試圖找出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。

有人可以說明接收郵件，提取數據和重定向用戶的整個過程嗎？

謝謝！

來源

2014-06-14 elmekiesIsrael

我只是複製&粘貼你的代碼，一切工作完美。

基本上，您接收和處理POST數據的方式是您執行此操作的方式。 Express.js（與bodyParser配合使用）將很多工作都帶走，因此您可以簡單地訪問數據。

此外，重定向的工作方式與您所做的完全相同。只有一件事：流程重定向涉及狀態碼（302）。這意味着首先將狀態碼設置爲200毫無意義，因爲它被.redirect(url)調用覆蓋。

希望它有幫助

來源

2014-06-14 15:00:49 dlaxar

感謝您的回覆！其實我希望它重定向到地址： 127.0.0.1:8888/index.html#index 但我得到重定向到地址： 127.0.0.1:8888/login 而這就是我的問題（因爲它不存在）。當你運行它時，你會被重定向到第一個地址？ – elmekiesIsrael

我得到重定向到本地主機/ index.html＃登錄 – dlaxar

只是一個猜測：控制檯中是否有任何錯誤？錯誤可能會阻止node.js進入重定向 – dlaxar

您需要使用客戶端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並通過我們的表單這個。通過諸如url，request-method等參數傳遞ajax請求

來源

2016-06-15 10:24:01 Kundan

「＃myForm」字段究竟是什麼？ – Nxt3

@ Nxt3 **＃myForm **是表單的ID。 – Kundan

在Node.js Express中發佈和重定向

回答

相關問題