接收由 jQuery 发送并由 Node Js 接收的 JSON 格式的数组表单数据答案

【问题标题】：Receiving array form data as JSON sent by jQuery and received by Node Js接收由 jQuery 发送并由 Node Js 接收的 JSON 格式的数组表单数据
【发布时间】：2017-03-03 14:36:36
【问题描述】：

我正在玩 Node Js，我一直在构建一个应用程序作为学习过程，在这个应用程序中，我想通过 jQuery/AJAX 从 HTML 表单发送数据，并让 Node Js/Express 接收和处理数据.

下面的 HTML 包含一系列这些输入组：

<form action="/nodeRoute" method="post" id="myFormID">
<div class="input-group col-xs-4">
  <input type="text" class="form-control input-sm" name="field1[]" />
  <span class="input-group-addon">-</span>
  <input type="text" class="form-control input-sm" name="field2[]" />
</div>
</form>

在 jQuery 端，我发送数据如下：

$('#myFormID').submit(function(event) {
    event.preventDefault();
    var formData = $('#myFormID').serializeArray();

    // Send AJAX request.
    $.ajax({
        type: "POST",
        url: "/nodeRoute",
        data: JSON.stringify({formData}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            console.log('Success');
        },
        failure: function(err) {
            console.log("Failure", err);
        }
    });
});

在节点端我使用router.use(bodyParser.json()); 并输出console.log(req.body.formData);。我得到的是以下内容：

[ { name: 'field1[]', value: '12' },
{ name: 'field1[]', value: '34' },
{ name: 'field2[]', value: '56' },
{ name: 'field2[]', value: '78' } ]

我想要的是：

[ { field1: [12,34], field2: [56,78] } ]

这可能吗？

【问题讨论】：

你的 html 是什么样的？
我已经修改了原始帖子以包含正在使用的表单示例。
发送数据的格式是什么？我的意思是请求数据看起来如何？
无法获取值数组，只能获取field[1]=10、field[2]=20等
如果你真的想要你一直要求的方式，那么你需要手动完成，如果你对这种方法没问题，我可以继续为你编写 JS

标签： javascript jquery json ajax node.js

【解决方案1】：

要以您需要的格式构建数据，您需要通过循环遍历表单的元素并在对象中设置键和值来手动完成。试试这个：

var formData = {};
$('#myFormID .form-control').each(function() {
  var fieldName = this.name.replace(/\[\]/g, '');
  if (!formData[fieldName])
    formData[fieldName] = [];    
  formData[fieldName].push(this.value);
});

console.log(formData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/nodeRoute" method="post" id="myFormID">
  <div class="input-group col-xs-4">
    <input type="text" class="form-control input-sm" name="field1[]" value="12" />
    <span class="input-group-addon">-</span>
    <input type="text" class="form-control input-sm" name="field2[]" value="34" />
  </div>
  <div class="input-group col-xs-4">
    <input type="text" class="form-control input-sm" name="field1[]" value="56" />
    <span class="input-group-addon">-</span>
    <input type="text" class="form-control input-sm" name="field2[]" value="78" />
  </div>
</form>

从那里您可以将生成的对象提供给$.ajax 的data 属性。您不需要将其字符串化，因为 jQuery 会为您执行此操作：

// Send AJAX request.
$.ajax({
    type: "POST",
    url: "/nodeRoute",
    data: formData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        console.log('Success');
    },
    failure: function(err) {
        console.log("Failure", err);
    }
});

【讨论】：

谢谢，我希望有内置的东西可以让我得到这种格式的数据，但是你的 sn-p 已经工作了。
不幸的是，serializeArray() 不是为每个输入元素构建一个对象，它不会将它们组合在一起。很高兴为您提供帮助

【解决方案2】：

我会这样做：

// your node backend

req.body.field.split(' '); // => [ 12, 32, ... ]

<!-- your html -->

<input type="text" name="field">

【讨论】：