提交表单时转到新的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