无法通过 AJAX 从 JavaScript 向 PHP 发送多维数组

Question

我看到很多关于完全相同的事情的问题。但是我尝试了很多东西，以至于我真的不确定我正在做的事情是否还有效。

所以，我有这个多维数组，我通过循环通过一个 html 表创建。我想将它发送到 PHP，所以我可以循环它，并创建我需要将它存储在数据库中的对象.

但是当我尝试通过 for each 循环它时，我从 PHP 得到的只是“警告：为 foreach() 提供的参数无效”

function ReturnFamilyMembers() 
{
   var Family = [];
   var Table= document.getElementById('FamilyTable');
   var RowQuantity= Table.rows.length; 

   for (var i = 0; i < RowQuantity; i++)
   {
     var Columns= Table.rows.item(i).cells;
     var ColumnQuantity= Columns.length;
     Family[i] = [];

        for(var j = 0; j < ColumnQuantity; j++)
        {
          Family[i][j] = Columns.item(j).innerHTML;
        }
    }

    var headers =
    {
        'Content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
    };

    var FamilyArray = encodeURIComponent( JSON.stringify( Family) );
    /*console.info( payload );*/

    var xhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    /* Add a callback function to process any response from target url ( Worker.php )*/
    xhttp.onreadystatechange = function()
                            {
                                if( xhttp.readyState == 4 && xhttp.status == 200 )
                                {
                                    cbReturnFamilyMembers.call( this, xhttp.response );
                                }
                            };

    xhttp.open( 'POST', 'Worker.php', true ); 
    for( header in headers ) xhttp.setRequestHeader( header, headers[ header ] );
    xhttp.send( 'Family=' + FamilyArray );

}

function cbReturnFamilyMembers($resp,$response)
{
    alert($resp + $response);
}
}

还有 php 方面...

$Family =  json_decode( $_POST['Family'],true);

foreach($Family as $Array)  ---> This line launches the error.
{
   foreach($Array as $Value) 
   {
    ///object creation
   }
}

提前谢谢你。我认为我真的被困在这里，因为我是 PHP、JS 和 AJAX 的新手，所以一切似乎都神奇地发生了。 （真的不能说我做事的方式是否正确。） 我希望我足够清楚，或者如果我能澄清任何事情，请告诉我。

-------------------------------------------------------------------------- ----------------------------------

编辑：很抱歉回复晚了，感谢您的回答。我要更新代码，所以你可以看到我到目前为止做了什么。 （基本上我改变了 Ajax 部分，就像你们说的那样是一个 POST 动作）。 我想我没有很好地解释整个事情，这个数组必须通过提交表单发送，这个函数在“onSubmit”上调用（抱歉没有解释）。我开始意识到我在 php 的 $_POST 数组中没有一个名为“Family”的成员，因为我收到“找不到索引”的错误，所以，我在表单中隐藏了一个输入并以这种方式调用它NAME 属性。 尽管如此，我仍然在 php 端收到一个非数组之类的值，（实际上，当我回显它时，它会打印一个 (1)）。 我开始考虑传递数组的其他方式，但这就是我首先使用 JS 和 ajax 的原因。 我怀疑 "xhttp.send('Family=' + 数组);"部分......它真的在 $_POST 数组的索引 ['Family'] 上发布数组吗？我想知道。 也许作为值传递的数组被表单的输入覆盖（实际上提交时没有值）

******************************编辑，再次************************ ************************

更改了代码，并且运行良好。（将 Cast 添加到 Array 对象）

$Family =  (Array)json_decode( $_POST['Family']);

Answer 1

昨晚当我发布我的初始评论时，我没有注意到您原始函数的一些小错误，尽管其他人已经注意到它们并在上面传递了评论 - 该函数据说是通过 POST 发送的，但是有send() 方法中没有发送参数，只附加到 url，就像你对 GET 请求所做的那样。另外，虽然我相信这并不重要，但您没有为请求设置任何标头，也没有回调函数。

下面的更改代码确实通过POST 发送表格中的内容

<script type='text/javascript'>
    /* callback function to handle response data */
    function cbReturnFamilyMembers( response ){
        alert( response )   
    }

    function ReturnFamilyMembers() {
       var Family = [];
       var Table= document.getElementById('FamilyTable');
       var RowQuantity= Table.rows.length; 

       for ( var i = 0; i < RowQuantity; i++ ){
            var Columns= Table.rows.item(i).cells;
            var ColumnQuantity= Columns.length;
            Family[i] = [];
            for( var j = 0; j < ColumnQuantity; j++ ) Family[i][j] = Columns.item(j).innerHTML;
        }

        /* XHR headers to be set */
        var headers={
            'Content-type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
        };
        var payload=encodeURIComponent( JSON.stringify( Family ) );
        /*console.info( payload );*/

        var xhttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

        /* Add a callback function to process any response from target url ( Worker.php )*/
        xhttp.onreadystatechange=function(){
            if( xhttp.readyState==4 && xhttp.status==200 ){
                cbReturnFamilyMembers.call( this, xhttp.response );
            }
        };

        xhttp.open( 'POST', 'Worker.php', true ); 
        for( header in headers ) xhttp.setRequestHeader( header, headers[ header ] );
        xhttp.send( 'Family='+payload );
    }
</script>

Answer 2

我不是原生 JavaScript 专家（在涉及 AJAX 等方面我更喜欢 jQuery 之类的东西），但从我在您的代码中读到的内容来看，您在 PHP 端没有收到预期的 POST 数据。看着你的 ajax 调用，我看到了一些奇怪的东西：

xhttp.open("POST", "Worker.php&Family= " +  
   encodeURIComponent(JSON.stringify(Family)), true);
xhttp.send();

我发现您在 GET 请求中使用的是 & 而不是 ?。
如果我查看example code on w3schools，它会向我展示一些不同的东西：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

尝试更改您的 JavaScript 代码以通过 POST 而不是 GET 发送数据。

Answer 3

我试图查看我错过的低谷，并在 $_POST 上添加了一些强制转换（以防万一，你知道）作为一个实际的数组，你猜怎么着。它就像一个魅力。这些是我真正讨厌 php 的地方，但我做到了。

所以，PHP端的代码是这样的……

$Family =  (Array)json_decode( $_POST['Family']);

并且它不再抱怨为每个传递一个不正确的参数。实际上它似乎也将数组的内部转换为父数组，因为它内部的每个嵌套都按预期工作。

嗯，我有点为我在这件事上浪费的时间感到羞愧，但我感谢大家的帮助，我非常感谢，实际上是你的回答让我通过了这件事的工作,（并通过$_POST获取数据发送）。