jquery - 无法从 jQuery 发布到 Nodejs 端点

Question

无法读取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 返回空对象。请问我该如何解决这个问题？

Answer 1

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

您必须确保将可解析为 JSON 的内容传递到 Express 端点。您可以使用 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'

在端点函数中

<小时/>

显然，以上内容是自动化表单元素 -> 有效 JSON 的通用答案。如果您没有复杂的表单，您可以使用

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