如何使用jquery将所有元素的数组传递给php答案

【问题标题】：How to pass array with all elements with jquery to php如何使用jquery将所有元素的数组传递给php
【发布时间】：2016-11-20 23:51:47
【问题描述】：

我正在尝试将数组从 jQuery 传递给 PHP。

<input type="checkbox" id="name1" name="name[]" value="name1"> Name1
<input type="checkbox" id="name2" name="name[]" value="name2"> Name2
<input type="checkbox" id="name3" name="name[]" value="name3"> Name3<br />

<input type="checkbox" id="phone1" name="phone[]" value="samsung"> Samsung
<input type="checkbox" id="phone2" name="phone[]" value="nokia"> Nokia
<input type="checkbox" id="phone3" name="phone[]" value="motorola"> Motorola<br />

$(document).ready(function() {
    $(":checkbox").on('change', function() {
        var group = [];
        var mygroup = {};

        $(':checkbox:checked').each(function(i){    
            var val = this.value;
            var name = this.name;   
            mygroup[name] = val;
            var all = name + "=" + val;
            group.push(all);

            $.ajax({ 
                type: "POST", 
                url: 'testdraft1.php',
                data: mygroup, // TRIED WITH group and all also. Doesn't work.
                success: function(data) {
                    $("#result").html(data);
                }
            });     
        });
    });
});

使用此代码，数组被传递给 PHP，但只有 1 个元素。即使我选择了多个元素。我做错了什么？

【问题讨论】：

您的所有输入都具有相同的 ID 和名称。改变它
这是因为您在每次复选框发生更改时都在初始化数组。将数组移出$(":checkbox").on('change', function() {
改了，还是一样。仍然没有包括所有元素。
问题是因为您每次都覆盖对象的属性，因为复选框都具有相同的名称。您还为每个复选框发送了 AJAX 请求，我认为这不是您想要的。
AJAX 调用应该在 change 函数中，而不是在 each 循环中。

标签： javascript php jquery arrays ajax

【解决方案1】：

这很有效，而且可能比使用FormData 更简单。（请注意，我已将 name[] 更改为 name 并将 phone[] 更改为 phone。）我还将 AJAX 调用移到了 each 循环之外。

HTML：

<input type="checkbox" id="name1" name="name" value="name1"> Name1
<input type="checkbox" id="name2" name="name" value="name2"> Name2
<input type="checkbox" id="name3" name="name" value="name3"> Name3<br />

<input type="checkbox" id="phone1" name="phone" value="samsung"> Samsung
<input type="checkbox" id="phone2" name="phone" value="nokia"> Nokia
<input type="checkbox" id="phone3" name="phone" value="motorola"> Motorola<br />

JavaScript：

$(document).ready(function() {
    $(":checkbox").on('change', function() {
        var mygroup = {};

        $(':checkbox:checked').each(function(i) {
            var val = this.value;
            var name = this.name;

            mygroup[name] = (mygroup[name] || []).concat([val]);
        });

        $.ajax({ 
            type: "POST", 
            url: 'testdraft1.php',
            data: mygroup,
            success: function(data) {
                $("#result").html(data);
            }
        });
    });
});

编辑

这行有点混乱：

mygroup[name] = (mygroup[name] || []).concat([val]);

这是一个更简单的版本：

// initialize with an empty array if needed
if (mygroup[name] === undefined) {
    mygroup[name] = [];
}
// append the most recent value to the array
mygroup[name].push(val);

【讨论】：

@Pugazh @smarx 谢谢各位大师，谢谢一百万不理解 concat 所以以下和工作完美。 $(document).ready(function() { $(":checkbox").on('change', function() { var mygroup = {}; $(':checkbox:checked').each(function(i){ var val= this.value; var name = this.name; mygroup[name]=val; }); $.ajax({ type: "POST", url: 'testdraft1.php', data : mygroup, success: function(data){ $("#result").html(data); } }); }); }); 尝试了两种代码 n 给出了相同的结果
@Somename 该代码不可能工作。当您在同一组中选中多个复选框时，您确定它有效吗？（多个name 或多个phone？）
@Somename 查看我的编辑，我为该行添加了一个更简单的替代方案。
如何使用相同的代码传递变量进行分页？我可以在同一个查询中执行 ajax post 和 getJSON 吗？

【解决方案2】：

您在每个循环内调用 ajax 帖子，这意味着如果您选中五个框，您将为每次调用的每次迭代发送单独的帖子。

这意味着第一个帖子将只有一个复选框，第二个帖子将有两个，等等。

除非您真的想这样做，否则您需要在调用 ajax 之前关闭每个循环。

这并不能解决名称问题，但它会解决您只能将一个复选框发送到 php 的原因。

【讨论】：

每个调用都不会有一个以上的复选框（name[] 或phone[]），因为mygroup 每个键只能有一个值。

【解决方案3】：

您的代码存在多个问题，

AJAX 代码应该在.each 函数之外。
在change 事件之外定义数组。
您不能在 AJAX 请求中像这样直接发送数组。为此请使用 FormData。

所以像这样改变你的代码，

$(document).ready(function() {
        var group = []; //DEFINED THE ARRAY
        $(":checkbox").on('change', function() {
            $(':checkbox:checked').each(function(i) {
                var val = this.value;
                var name = this.name;
            var dataObject = {};
            dataObject.name = name;
            dataObject.val = val;

            group.push(dataObject);

        });
        var fd = new FormData();
        for (var i = 0; i < group.length; i++) {
            fd.append(group[i].name, group[i].val);
        }
        $.ajax({
            type: "POST",
            url: 'testdraft1.php',
            data: fd,
            success: function(data) {
                $("#result").html(data);
            }
        });
    });
});

【讨论】：

"你不能像这样在 AJAX 请求中直接发送数组。使用 FormData。"其实看看我的回答。事实证明，jQuery 以 PHP 所期望的方式处理值数组。（如果您发送 { foo: [1, 2, 3] }，jQuery 会将其编码为 foo[]=1&foo[]=2&foo[]=3，这是 PHP 的约定。）
确实如此。我们也可以这样发送{ foo: [1, 2, 3] }

【解决方案4】：

<input type="checkbox" id="name1" name="name[]" value="name1"> Name1
<input type="checkbox" id="name2" name="name[]" value="name2"> Name2
<input type="checkbox" id="name3" name="name[]" value="name3"> Name3

<br />

<input type="checkbox" id="phone1" name="phone[]" value="samsung"> Samsung
<input type="checkbox" id="phone2" name="phone[]" value="nokia"> Nokia
<input type="checkbox" id="phone3" name="phone[]" value="motorola"> Motorola

<br />


$(document).ready(function() {
    $(":checkbox").on('change', function() {

    var group=[];   //DEFINED THE ARRAY
    var mygroup = {};  // DEFINED THE OBJECT

        $(':checkbox:checked').each(function(i){    

        var val= this.value;
        var id = this.id;   

        mygroup[id]=val;  //PUSH VALUES TO THE OBJECT mygroup

        var all = id+"="+val;

        group.push(all); // PUSH ALL CHECKBOX VALUES TO ARRAY

    $.ajax({ 
        type: "POST", 
        url: 'testdraft1.php',
        data : mygroup,             //TRIED WITH group and all also. Doesn't work.
        success: function(data){
        $("#result").html(data);
    }
   });  

    });
    });

});

使用相同的名称，而是更改名称，您更改了对您有用的 id 名称

【讨论】：