【问题标题】：Why does my browser loading JSON response from Express?为什么我的浏览器会从 Express 加载 JSON 响应？
【发布时间】：2019-12-26 06:38:54
【问题描述】：

上下文：

我有一个带有表单 POST 操作的网站。我希望用户将他们的电子邮件输入到表单中。提交电子邮件后，会将 POST 发送到服务器。使用 Express 和 MailChimp API，我将此电子邮件与后端 app.js 文件一起保存到我的 MailChimp 帐户。

问题：

成功添加电子邮件后，我使用 res.json() 发送了一个虚拟 JSON 对象。现在它只是一个虚拟的 JSON 对象，但将来我会用它来发送成功的详细信息。 问题是我的浏览器从我的 index.html 重定向以显示此 JSON 文件。我不希望页面重新加载或重定向到 JSON 响应。我做错了什么？

真的很想得到任何帮助，谢谢:)

我试过了：res.end() 和 res.send() 和 res.sendStatus(200)

APP.JS（只是 POST 的东西）：

// Signup Route
app.post('/signup', (req, res) => {
    const {email} = req.body;

    console.log(req);

    // Make sure fields are fillled
    if(!email){
        res.redirect('/fail.html');
        return;
    }

    // Make request data
    const data = {
        members: [
            {
                email_address: email,
                status: 'subscribed',
                merge_fields: {} ///may need to remove this line....
            }
        ]
    };

    const postData = JSON.stringify(data);

    const options = {
        url: 'myprivateurl',
        method: 'POST',
        headers: {
            Authorization: 'myprivatekey'
        },
        body: postData
    };


    request(options, (err, response, body) => {
        if(err) {
            res.redirect('/fail.html');
        }
        else{
            if(response.statusCode == 200){
                //res.redirect('/success.html');
                console.log("server side success");
                res.json({
                        success: true,
                        message: "Some success message",
                        data: "some data if there's any"
                });
            }
                else{
                        res.redirect('/fail.html');
                }
        }
    });
});

HTML（只是形式的东西）：

 <!--Email List-->
            <div id="mailListHolder">
                SIGN UP FOR OUR MAIL LIST!
                <br>

                <div id="successtext"> Thanks! </div>
                <form id="emailform" action="/signup" method="POST">
                    
                    <input name="email" type="text" placeholder="dopedude@mail.com" onfocus="this.placeholder = ''"/>
                    <input type="submit" />
                </form>
            </div>

CLIENT JS（只是形式的东西）：

$('#emailform').submit(function() {

    console.log("emailform submit case WORKING!");
    $("#emailform").css({
        "display": "none",
    });
    $("#successtext").css({
        "display": "block"
    });

    return false;
});

【问题讨论】：

你根本不是在做一个客户端的ajax请求，你只是用一个POST请求将客户端重定向到服务器。

标签： javascript jquery html css express

【解决方案1】：

使用 express 进行用户注册的小例子：

新用户注册

app.post('/api/user',(req,res)=>{
    const user = new User({
        email: req.body.email,
        password: req.body.password
    });

    user.save((err,doc)=>{
        if(err) res.status(400).send(err)
        res.status(200).send(doc)
    })
})

用户模式

const userSchema = mongoose.Schema({
    email:{
        type:String,
        required:true,
        trim:true,
        unique:1
    },
    password:{
        type:String,
        required:true,
        minlength:6
    }
})

const User = mongoose.model('User', userSchema )

或者你可以参考：https://github.com/karenaprakash/nodejs-sec-and-auth.git

这个项目是 express.js 的演示

【讨论】：