Question

有一个由脚本创建的输入表，可以包含任意数量的输入行，因此，有许多名称相同的输入元素。问题在于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/

Answer 1

一种简单的方法是在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));
})

Answer 2

将结果分成大块，然后将其重新分组。

$('#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"}]

表单输入同名+ serializeArray（）

2 个答案: