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

How to pass array with all elements with jquery to php

本文关键字:数组 php 元素 jquery 何使用 包含所      更新时间:2023-09-26

我正在尝试将数组从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 个元素。即使我选择多个元素。我做错了什么?

这有效,也许比使用 FormData 更简单。(请注意,我已将name[]更改为namephone[]更改为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);

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

这意味着第一篇文章将只有一个复选框,第二篇帖子将有两个复选框,依此类推。

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

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

你的代码有多个问题,

  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);
            }
        });
    });
});
<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 名称,它将对您有用