添加对象数组以形成数据答案

【问题标题】：Adding an array of objects to form data添加对象数组以形成数据
【发布时间】：2018-06-23 18:21:46
【问题描述】：

以下脚本创建所需的 PHP 提交：

index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <form id="myform">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="text" value="Series 0 name" name="series[0][name]">
            <input type="text" value="Series 0 position" name="series[0][position]">
            <input type="text" value="Series 0 id" name="series[0][id]">

            <input type="text" value="Series 1 name" name="series[1][name]">
            <input type="text" value="Series 1 position" name="series[1][position]">
            <input type="text" value="Series 1 id" name="series[1][id]">

            <input type="text" value="Series 2 name" name="series[2][name]">
            <input type="text" value="Series 2 position" name="series[2][position]">
            <input type="text" value="Series 2 id" name="series[2][id]">

            <input type="submit">
        </form>
        <form id="form2">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <script type="text/javascript">
            $(function(){
                function ajaxTest(data) {
                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "testajax.php",
                        data: data,
                        dataType: 'json',
                        success: function (rsp){
                            console.log(rsp);
                        }
                    });
                }
                ajaxTest($('#myform').serializeArray());
            });
        </script>
    </body>
</html>

testajax.php

<?php
ob_start();
var_dump($_POST);
syslog(LOG_INFO, ob_get_clean());
echo(json_encode($_POST));

系统日志

array(4) {
   ["name1"]=>
   string(6) "Name 1"
   ["name2"]=>
   string(6) "Name 2"
   ["name3"]=>
   string(6) "Name 3"
   ["series"]=>
   array(3) {
     [0]=>
     array(3) {
       ["name"]=>
       string(13) "Series 0 name"
       ["position"]=>
       string(17) "Series 0 position"
       ["id"]=>
       string(11) "Series 0 id"
     }
     [1]=>
     array(3) {
       ["name"]=>
       string(13) "Series 1 name"
       ["position"]=>
       string(17) "Series 1 position"
       ["id"]=>
       string(11) "Series 1 id"
     }
     [2]=>
     array(3) {
       ["name"]=>
       string(13) "Series 2 name"
       ["position"]=>
       string(17) "Series 2 position"
       ["id"]=>
       string(11) "Series 2 id"
     }
   }
 }

但实际上，我的表单没有所有系列数据，而是保存在 JavaScript 对象数组中。如何将其与表单数据一起发布？我不想使用JSON.stringify，因为它需要在服务器上解码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <form id="myform">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <form id="form2">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <script type="text/javascript">
            $(function(){
                function ajaxTest(data) {
                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "testajax.php",
                        data: data,
                        dataType: 'json',
                        success: function (rsp){
                            console.log(rsp);
                        }
                    });
                }
                var series=[
                    {name:'Series 1 name', position:'Series 1 position', id:'Series 1 id'},
                    {name:'Series 2 name', position:'Series 2 position', id:'Series 2 id'},
                    {name:'Series 3 name', position:'Series 3 position', id:'Series 3 id'}
                ]
                var formData=$('#form2').serializeArray();
                formData.push({name: 'series', value: series});
                ajaxTest(formData);
            });
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

我不太喜欢这个答案，因为我确信有更多开箱即用的解决方案，但它确实有效（至少在 Chrome 上）。

function serializeData(name, arr){
    var a=[];
    for (var i = 0; i < arr.length; i++) {
        for (var key in arr[i]) {
            a.push({name: name+'['+i+']['+key+']', value: arr[i][key]});
        }
    }
    return a;
}
var formData=$('#form2').serializeArray().concat(serializeData('series', series));

【讨论】：

【解决方案2】：

您可以使用 .serialize() 和 $.param 来创建编码字符串，然后用 & 符号连接它们

$(function(){
    function ajaxTest(data) {
        console.log(data);
        console.log(unescape(data));
                    
    }
    var series=[
                    {name:'Series 1 name', position:'Series 1 position', id:'Series 1 id'},
                    {name:'Series 2 name', position:'Series 2 position', id:'Series 2 id'},
                    {name:'Series 3 name', position:'Series 3 position', id:'Series 3 id'}
    ]
    var formData=$('#form2').serialize();
    var otherData = $.param({series:series});
    ajaxTest(formData+'&'+otherData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <form id="form2">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>

【讨论】：

谢谢 Musa，我预计会有更少的手动方式来做到这一点。