當提交表格時轉到新的html頁面

Im新的web應用程序和JavaScript和即時通訊嘗試去我提交表單時的感謝頁面。但它只是進入一個空白頁面。我查了一下，但沒有發現任何工作。我知道它必須對我的res.end（）做些什麼，因爲如果我不這樣做，它只是讓我的索引頁不斷做加載符號。當提交表格時轉到新的html頁面

任何建議將是偉大的！謝謝。

thankyou.html在我的index.html我server.js的

<div class=container2> 
      <form method="post" action="/thankyou.html" enctype="multipart/form-data" autocomplete="off" > 
       <fieldset> 
        // all my inputs and selectors 
        <input type="submit" value="Submit"> 
       </fieldset> 
      </form> 
     </div>

部分（節點）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Thank you</title> 
</head> 
<body> 
<h1>Thank you!!!!!</h1> 
</body> 
</html>

我的表格部分

var express = require('express'); 
var path = require('path'); 
var server = express(); 
var formidable = require("formidable"); 
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; 
var xhr = new XMLHttpRequest(); 
var request = require("request"); 

server.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS'); 
    next(); 
}); 


var url = '*****************************'; 

var port = process.env.port || 63342; 

// Define ./public as static 
server.use(express.static(path.join(__dirname, 'public'))); 


server.post("/thankyou.html", function(req, res, next) { 
    processFormFieldsIndividual(req, res); 
}); 


//All POST's use processFormFieldsIndividual 
//server.post('*', processFormFieldsIndividual); 

server.listen(port, function() { 

    console.log('listening on port ' + port); 
}); 


function processFormFieldsIndividual(req, res) { 
    // take the values from the form and store it to 
    // the schema for patient. 

    var form = new formidable.IncomingForm(); 
    form.on('field', function (field, value) { 


     switch (field) { 
      //puts values in json 

    }); 

    form.on('end', function() { 
     res.writeHead(200, { 
      'content-type': 'text/plain' 
     }); 

     // checks if the exists before it does a put or post. 
     var exists = checkIfExist(schema.name.family, schema.birthDate); 


     // if exists do a put 
     if (exists) { 
      res.end(); 
      xhr.open("PUT", url, true); 
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4 && (xhr.status == 201 || xhr.status == 200)) { 
        console.log(xhr.responseText); 
       } 
       else 
        console.log(xhr.responseText); 
      }; 
      xhr.send(JSON.stringify(schema)); 
     } 
     // if doesn't exist do a post 
     else { 
      res.end(); 
      xhr.open("POST", url, true); 
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4 && (xhr.status == 201 || xhr.status == 200)) { 
        console.log(xhr.responseText); 
       } 
      }; 
      xhr.send(JSON.stringify(schema)); 
     } 
     console.log(JSON.stringify(schema)); 
    }); 
    form.parse(req); 
}

來源

2016-06-15 Sam kh

你希望做一個在完成處理後重定向。看到這個問題：Nodejs - Redirect url。只需重定向到您想要的成功頁面。

如果成功頁面在形式/ Congratulations.html，您的重定向應該是這樣的：

res.redirect('forms/Congratulations.html');

刪除您res.end（），並把重定向在你的邏輯的盡頭。你會有這樣的結局：

xhr.send(JSON.stringify(schema)); 
res.redirect('forms/Congratulations.html');

來源

2016-06-15 21:59:06

根據您發佈的說明和代碼，看起來好像你是在複雜的一點點。你爲什麼不嘗試做以下：

1）有一個端點只用於處理數據，就像這樣：

server.post('/process-form', function(req, res, next) { 
    processFormFieldsIndividual(data); 
});

2）具有可以將用戶重定向到後一個端點，像所以：

server.post('/process-form', function(req, res, next) { 
    processFormFieldsIndividual(data); 
    res.redirect('/thankyou.html'); 
});

如果processFormFieldsIndividual是異步的，有它返回一個承諾，而不是，這樣你可以這樣做：

server.post('/process-form', function(req, res, next) { 
    processFormFieldsIndividual(data).then(function() { 
     res.redirect('/thankyou.html'); 
    }); 
});

我希望有幫助！

來源

2016-06-15 22:06:09

如果解決了您的問題，請考慮標記此答案爲正確的（通過單擊此帖子左上角的灰色複選標記）。 –

謝謝你們兩位！兩種解決方案都可以工也使我不得不把thankyou.html移動到公用文件夾

我已經刪除

res.writeHead(200, { 
      'content-type': 'text/plain' 
     });

和所有

res.end();

SOLUTION

server.post("/process-form", function(req, res, next) { 
    processFormFieldsIndividual(req, res); 
    res.redirect('/thankyou.html') 
});

指數（客戶端） .html

<div class=container2> 
      <form method="post" action="/process-form" enctype="multipart/form-data" autocomplete="off" > 
       <fieldset> 
        // all my inputs and selectors 
        <input type="submit" value="Submit"> 
       </fieldset> 
      </form> 
     </div>

來源

2016-06-15 22:35:35

當提交表格時轉到新的html頁面

回答

相關問題