具有相同名称的表单输入 + serializeArray()答案

【问题标题】：Form inputs with same names + serializeArray()具有相同名称的表单输入 + serializeArray()
【发布时间】：2019-08-09 18:51:47
【问题描述】：

有一个由脚本创建的输入表，可以包含任意数量的输入行，因此有很多同名的输入元素。问题是 serializeArray() 没有拆分那些输入行，所以我不可能在 PHP 端处理这些行。

<form>
  <table>
    Here might be any amount of tr like these
    <tr>
      <td><input type='text' name='username' placeholder='username'/></td>
      <td><input type='text' name='about' placeholder='about'/></td>
      <td><input type='text' name='website' placeholder='website'/></td>
    </tr>
    <tr>
      <td><input type='text' name='username' placeholder='username'/></td>
      <td><input type='text' name='about' placeholder='about'/></td>
      <td><input type='text' name='website' placeholder='website'/></td>
    </tr>
  </table>
  <input type='button' id='submit' value='Submit' />
</form>
<p>
JSON:
</p>

$('#submit').on('click',function(){
  var data = $('form').serializeArray();
  var json = JSON.stringify(data);
  $('p').append(json);
})

https://jsfiddle.net/5y4fwLpu/3/

【问题讨论】：

你想每行创建一个对象吗？
我只想分别与每一行交互，比如：<? $formData = json_decode($_POST[formDataJSON]); $formData[0]['username']; //first Row username $formData[1]['username']; //second Row username

标签： javascript jquery arrays json

【解决方案1】：

将结果分成块，然后按行重新组合。

$('#submit').on('click',function(){
    var data = $('form').serializeArray();

  processedData = [];
  var i,j,w,temparray,chunk = 3;

  for (i=0,j=data.length; i<j; i+=chunk) {
    form = data.slice(i,i+chunk);

    var obj = {};
    for(w=0; w < chunk; w++) {

      var name = form[w].name;
      var value = form[w].value;
      obj[name] = value;

    }
    processedData.push(obj);
  }

  var json = JSON.stringify(processedData);

  $('p').append(json);
})

结果是这样的：

JSON: [{"username":"User 1","about":"About 1","website":"Web 1"},{"username":"User 2","about":"About 2","website":"Web 2"}]

【讨论】：

【解决方案2】：

一种简单的方法是在 html 中使用数组名称，例如 name='username[]'，而不是 serializeArray() 使用 serialize()

然后在 php 中，$_POST['username']、$_POST['about'] 和 $_POST['website'] 中的每个都有数组

您可以遍历其中一个数组并使用索引从其他两个数组中获取相同的行值

JS 会是这样的：

$('#submit').on('click',function(){
  var data = $('form').serialize();
  $.post('someFile.php', data).then(res => console.log(res));
})

【讨论】：

谢谢！但我正在将 JSON 发送到 PHP 并寻找一种方法来做到这一点：<? $formData = json_decode($_POST[`formDataJSON`]); $formData[0]['username']; //first Row username $formData[1]['username']; //second Row username
好吧...由你决定，但使用$_POST['username'][0]这种方式非常简单
另一种方法是在 <tr>s 上使用 jQuery map() 并在每一行上创建自己的对象