javascript - jquery 表单序列化 - 没有传递任何东西...但 console.log 很好

Question

我的问题是我的表单正在提交(到节点/express api)，如果我console.log req.body(@ api)，结果是一个空对象。但是，如果我在客户端上 console.log ，则序列化字符串包含数据。

阅读其他帖子 - 他们的问题并不相同，因此发布的解决方案对我不起作用。

    <form class="newsletter-form  clearfix" method="post" action="/subscribe" role="form" id="frmSubscribe" >
        <div class="form-group " >
            <label for="newsletter-signup" >Subscribe</label>
            <input type="email" class="form-control input-sm" id="newsletter-signup" name="email" placeholder="Email Address">
            <button type="button" id="subscribe" class="btn btn-default black-button" >Subscribe Now!</button>
        </div>
    </form>

还有 JS

<script>
    $( document ).ready( function () {          

        $("#subscribe").click(function(){

            $.ajax({
                type: "POST",
                url: "/subscribe",
                data: $("#frmSubscribe").serialize(),
                success: function(msg) {                        
                    alert('Thank You, You are now Subscribed.');
                },
                error: function(err){
                    alert('Uh-oh, even the subscription form is mis-behaving!');
                }
            });
        });

    });
</script>

以及“/subscribe”处的代码

.post( (req, res) => {

    console.log( 'subscribe = ' + JSON.stringify( req.body ) );

});

“/subscribe”的结果如下所示:

subscribe = {}

虽然 console.log( $("#frmSubscribe").serialize() ) 的结果如下所示

email=whatever-i-type

挠头 - 当然我错过了一些明显的东西......提前谢谢。

可能影响此问题的一件事是此表单位于索引页面上，该索引页面是 Angular 2 应用程序的入口点。然而 - 正如我所说，客户端上的 console.log 会输出正确的信息 - 所以我相当确定 jquery 库正确地看到了表单，并提交到了正确的 api 路径 - 正如我的 api 'log' 正在输出- 看起来好像传递的对象是空的。

如果有帮助 - 如果我取出所有 JS，然后将表单更改为使用 'input type='submit' - 表单甚至不提交 - 它什么也不做 - 是的，我删除了监听器，那里应该没有什么干扰。但也许有。

Answer 1

请注意，您没有明确指定内容类型。默认情况下，jQuery 使用 'application/x-www-form-urlencoded 的 content-type； charset=UTF-8' 与帖子。在这种情况下，您将在服务器上接收 url 编码的字符串内容，而不是 JSON。

检查这个answer - 关于如何解析您正在使用的特定 Express 版本的内容。