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 - Redirect url。只需重定向到您想要的成功页面。

如果您的成功页面位于表单/ 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是异步的，请让它返回一个承诺，这样你可以这样做：

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 个答案: