jQuery 表单提交到远程节点服务器 API答案

【问题标题】：jQuery form submit to a remote Node server APIjQuery 表单提交到远程节点服务器 API
【发布时间】：2014-03-11 05:33:19
【问题描述】：

（一个快速的免责声明，我认为您不需要了解太多关于Node 或Express 来回答这个问题！这是jQuery 表单提交结束时的一个非常重要的问题）

我在 Wordpress 上设置了一个表单，我想将其数据发送到我的Node.js 进程。节点进程位于http://localhost:5000/agm/saveNewUser 并接受POST 命令，我已验证该命令有效。 Node 服务器位于 Express 之上。

我无法将数据从前端表单传输到 Node.js。表单如下所示：

<form class="form-horizontal classy-form franklin-book ng-pristine ng-valid" id="signup" role="form">
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputName">
        Name </label>
        <div class="col-md-10">
            <input class="form-control" id="inputName" type="text" mouseev="true" keyev="true">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputEmail">
         Email
        </label>
        <div class="col-md-10">
            <input class="form-control" id="inputEmail" type="email">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputLocation">
         Location
        </label>
        <p>
        </p>
        <div class="col-md-10">
            <input class="form-control" id="inputLocation" type="text">
        </div>
    </div>
    <div class="radio">
        <label><input id="optionsRadios1" type="radio" checked="checked" name="optionsRadios" value="option1">Start the course from Monday</label>
    </div>
    <div class="radio">
        <label><input id="optionsRadios2" type="radio" name="optionsRadios" value="option2">Start the course from today</label>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <button id="formSubmit" class="btn btn-default" type="submit"><br>
             Get in contact</button>
        </div>
    </div>
</form>

表单像这样提交，使用jQuery Form Plugin:

 $('#signup').ajaxForm({
    url: 'http://localhost:5000/agm/saveNewUser/', 
    type: 'post'
 })

我的节点服务器简单设置为：

exports.saveNewUser = function (req, res) {
    console.log("Saving a new user");
    console.log(req);
    console.log(res);
   // These console.logs are just to debug so I can see if the form data is being posted correctly
};

目前，我的Node 控制台记录了一大堆内容，但与表单的实际输入无关。我试过了：

$('#signup').ajaxForm({url: 'http://localhost:5000/agm/saveNewUser/', type: 'post', data: $('#signup').serialize()})

但这会导致表单根本无法访问我的node 服务器。

【问题讨论】：

当您将 jquery 表单插件排除在外时会发生什么？ $.post(localhost:5000/agm/saveNewUser, {foo: 'foo'}); 有记录吗？
@Will 修复了一些问题。数据现在以{foo:'bar'} 的形式进入Node 的req.body。关于如何在这里获取我的表单数据的建议？
下一个调试步骤：填写表单，不要提交，然后在浏览器控制台中执行$('#signup').serialize()。它看起来像你期望的那样吗？抱歉，我对您使用的表单插件一无所知。不过，不使用插件就可以很容易地进行异步表单提交（如果这是问题所在）。
另见stackoverflow.com/questions/1960240/jquery-ajax-submit-form
您不能使用表单标签中的方法属性简单地将表单提交为 POST 吗？
localhost:5000/agm/saveNewUser" method="post" id="registerForm">

标签： javascript jquery forms node.js

【解决方案1】：

我不知道 jQuery Form Plugin 是如何工作的，但是由于Same origin policy，您无法将 AJAX 请求发送到不同的端口。

【讨论】：

您可以对任何来源进行 AJAX POST。也可以将目标服务器配置为发出专门设计用于允许跨域 AJAX GET 请求的 CORS 标头。或者，如果支持，可以使用 JSONP。