提交表單時轉到新的html頁面

Question

我是webapps和javascript的新手，我在提交表單時嘗試轉到“謝謝”頁面。 但是它只是進入一個空白頁面。 我已經查了一下，但似乎什么也沒有。 我知道它必須對我的res.end（）做些什么，因為如果我不這樣說的話，它只會使我的索引頁不斷執行加載符號。

任何建議都很好！！！ 謝謝。

Thankyou.html

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

我index.html中的表單部分

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

我的server.js（節點）的一部分

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

Answer 1

完成處理后，您想進行重定向。 看到以下問題： Nodejs-重定向url 。 只需重定向到您想要的成功頁面即可。

如果成功頁面位於forms / Congratulations.html，則重定向將如下所示：

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

刪除您的res.end（）並將重定向放在邏輯的最末端。 您將得到這樣的結尾：

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

Answer 2

根據描述和發布的代碼，它看起來好像使您變得有些復雜。 您為什么不嘗試執行以下操作：

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是異步的，則讓它返回一個promise，您可以這樣做：

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

希望對您有所幫助！

Answer 3

謝謝你們倆！ 兩種解決方案都有效。 還使我不得不將thankyou.html移到公用文件夾（客戶端）

我刪除了

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

和所有

res.end();

解

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

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

提交表單時轉到新的html頁面

問題描述

3 個解決方案

解決方案1
2 2016-06-15 21:59:06

解決方案2
1 2016-06-15 22:06:09

解決方案3
0 2016-06-15 22:35:35

提交表單時轉到新的html頁面

問題描述

3 個解決方案

解決方案1 2 2016-06-15 21:59:06

解決方案2 1 2016-06-15 22:06:09

解決方案3 0 2016-06-15 22:35:35

解決方案1
2 2016-06-15 21:59:06

解決方案2
1 2016-06-15 22:06:09

解決方案3
0 2016-06-15 22:35:35