无法从jQuery发布到nodejs端点

时间:2018-06-02 10:32:30

标签: jquery node.js

无法读取node.js中的jQuery传入的表单数据

ejs中的jQuery代码:

  var data1 = $('#form-horizontal1').serialize();
    $.ajax({
      url: "/users/home/dashboard",
      data: data1,
      dataType:'json',
      ContentType:'application/json',
      type: 'POST',
      success: function (result) {
          console.log(result);
          if(result.status == 200){
            console.log(result);
              //self.isEditMode(!self.isEditMode());
          }
      },
      error: function(result){
          console.log(result);
      }
  });

我在ejs中的表格:

 <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Enter Pincode</h4>
      </div>
      <div class="modal-body" id="result">
        <p>Please request for the pincode from the customer.</p>
        <form class="form-horizontal" id="form-horizontal1" action="/users/home/dashboard" role="form">
          <div class="form-group">
            <label  class="col-sm-2 control-label">Pincode:</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" 
                name="pinCode" placeholder="Pincode from customer"/>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Confirm</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

的node.js

router.post('/home/dashboard',function(req,res,next){
  if(req.method === 'POST' && req.session.userId != null){
    var pinCode= req.body.data;
    pinCode = pinCode.slice(8);
    TransactionDetails.findOne({
      where: {
          //transaction_pincode:randomNumber,
          transaction_pincode:pinCode,
          transaction_verified:0
      } 

req.body返回空。

我正在尝试将表单中的数据用户输入传递给jquery以在node.js中执行POST并将成功消息返回给jquery。

但是,当我运行代码时,node.js中的req.body返回空对象。我该如何解决这个问题呢?

1 个答案:

答案 0 :(得分:1)

由于您使用serialize(),实际上只是在pinCode=value表单上传递了一个URL编码的字符串(如果您有多个输入,则由&分隔)。

您必须确保将某些内容传递给可以解析为JSON的快速端点。您可以使用serializeArray()创建{ name:pinCode, value:value }字典并从中构建可解析的JSON字符串:

var serialized = $('#form-horizontal1').serializeArray();
var params = {};
for (var param in serialized) {
   params[serialized[param].name] = serialized[param].value
}
params = JSON.stringify(params);

现在表格上有一个字符串

'{ "pincode": "value" }'

将其发送为

$.ajax({
  url: "/users/home/dashboard",
  data: params,
  contentType: 'application/json',
  type: 'POST',
  ...
})

如果其他一切都是正确的(我们必须假设它),您现在可以访问

var pinCode = req.body.pinCode; //not 'data'
您的端点函数中的

显然,上述内容是对自动化表单元素的通用答案 - &gt;有效的JSON。如果您没有复杂的表格,可以使用

$.ajax({
  url: "/users/home/dashboard",
  data: JSON.stringify({ pinCode: $('input[name=pinCode]').val() } ),
  contentType: 'application/json',
  type: 'POST',
  ...
})