Question

我正在玩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] } ]

这可能吗？

Answer 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>

从那里，您可以将结果对象提供给data的{{1}}属性。您不需要对其进行字符串化，因为jQuery会为您执行此操作：

$.ajax

Answer 2

我就是这样做的：

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

<!-- your html -->

<input type="text" name="field">

接收数组表单数据作为jQuery发送的JSON并由Node Js接收

2 个答案: