如何將帶有jQuery的所有元素的數組傳遞給PHP

Question

我試圖將數組從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個元素。 即使我選擇了多個元素。 我究竟做錯了什么？

Answer 1

您正在每個循環內調用ajax帖子，這意味着如果選中五個框，則將為每個調用的每次迭代發送一個單獨的帖子。

這意味着第一篇文章將只有一個復選框，第二篇文章將有兩個，依此類推。

除非您真的想這樣做，否則您需要在ajax調用之前關閉每個循環。

那不能解決名稱問題，但是可以解決只將一個復選框發送到php的原因。

Answer 2

這有效並且也許比使用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);

Answer 3

您的代碼有很多問題，

1. AJAX代碼應位於.each函數之外。
2. 在change事件之外定義數組。
3. 您不能像這樣在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);
            }
        });
    });
});

Answer 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名稱，它將為您服務