通过 jQuery ajax() 向 PHP 发送多个复选框数据

Posted

技术标签:

【中文标题】通过 jQuery ajax() 向 PHP 发送多个复选框数据【英文标题】:Send multiple checkbox data to PHP via jQuery ajax() 【发布时间】:2012-03-18 14:36:56 【问题描述】:

我想通过 jQuery 的 .ajax() 在我的网站上提交一个 POST 表单,其中包含一个 textarea 字段和一个输入字段(type="checkbox" 带有任意/可变数量的复选框)。 php 接收到 textarea 数据,并正确地向用户显示 ajax 响应。但是,似乎 PHP 没有接收到复选框数据(是否被选中)。我怎样才能让它工作?这是我的代码:

html

<form method="post" action="myurl.php" id=myForm>
    <textarea id="myField" type="text" name="myField"></textarea>
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" />
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" />
    ...(maybe some more checkboxes - dynamically generated as necessary)
    <input id="submit" type="submit" name="submit" value="Submit" onclick="submitForm()" />
</form>

jQuery:

function submitForm() 
$(document).ready(function() 
$("form#myForm").submit(function() 

        var myCheckboxes = new Array();
        $("input:checked").each(function() 
           myCheckboxes.push($(this).val());
        );

        $.ajax(
            type: "POST",
            url: "myurl.php",
            dataType: 'html',
            data:  myField:$("textarea[name=myField]").val(),
                    myCheckboxes:myCheckboxes ,
            success: function(data)
                $('#myResponse').html(data)
            
        );
        return false;
);
);

现在,PHP

$myField = htmlspecialchars( $_POST['myField'] ) );
if( isset( $_POST['myCheckboxes'] ) )

    for ( $i=0; $i < count( $_POST['myCheckboxes'] ); $i++ )
    
        // do some stuff, save to database, etc.
    

// create the response
$response = 'an HTML response';
$response = stripslashes($response);
echo($response);

一切都很好:提交表单时,我的数据库中存储了一条新记录,响应被 ajaxed 回网页,但未发送复选框数据。我想知道哪些复选框(如果有)已被选中。我读过关于 .serialize()、JSON 等的信息,但这些都不起作用。我必须在 jQuery 和 PHP 中序列化/JSON 吗?如何?发送带有复选框的表单数据时,一种方法比另一种更好吗?我已经坚持了2天。任何帮助将不胜感激。提前谢谢!

【问题讨论】:

你不必担心表单元素试试这个***.com/questions/19029703/… 【参考方案1】:
var myCheckboxes = new Array();
$("input:checked").each(function() 
   data['myCheckboxes[]'].push($(this).val());
);

您将复选框推送到错误的数组 data['myCheckboxes[]'] 而不是 myCheckboxes.push

【讨论】:

谢谢。我改变了它,但我仍然没有收到 PHP 端的数据。我已经尝试了几种不同的方法来使用 jQuery 处理复选框(我在这个网站上找到了大部分想法),但它们都没有奏效。我的代码创建了一个 mysql 数据库记录,但复选框字段始终为空,即使我在发送的表单中检查了多达 8 个不同的复选框。 Uncaught ReferenceError: data is not defined @Andy myCheckboxes.push($(this).val()); myCheckboxes = data['myCheckboxes[]'].push($(this).val()); 是最后一步【参考方案2】:

是的,使用 jquery.serialize() 非常有用

HTML

<form id="myform" class="myform" method="post" name="myform">
<textarea id="myField" type="text" name="myField"></textarea>
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" />
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" />
<input id="submit" type="submit" name="submit" value="Submit" onclick="return submitForm()" />
</form>
 <div id="myResponse"></div>

jQuery

function submitForm() 
var form = document.myform;

var dataString = $(form).serialize();


$.ajax(
    type:'POST',
    url:'myurl.php',
    data: dataString,
    success: function(data)
        $('#myResponse').html(data);


    
);
return false;

现在是 PHP,我导出 POST 数据

 echo var_export($_POST);

您可以看到所有复选框的值都已发送。希望对您有所帮助

【讨论】:

感谢@WinnMinnSoe 让我发现了 .serialize 方法! =) 谢谢@WinnMinnSoe。非常非常整洁!!【参考方案3】:

您目前拥有的代码似乎没问题。使用此检查复选框数组包含的内容。将此代码添加到您的 php 脚本顶部,并查看复选框是否正在传递给您的脚本。

echo '<pre>'.print_r($_POST['myCheckboxes'], true).'</pre>';
exit;

【讨论】:

【参考方案4】:

看看这个。

<script type="text/javascript">
    function submitForm() 
$(document).ready(function() 
$("form#myForm").submit(function() 

        var myCheckboxes = new Array();
        $("input:checked").each(function() 
           myCheckboxes.push($(this).val());
        );

        $.ajax(
            type: "POST",
            url: "myurl.php",
            dataType: 'html',
            data: 'myField='+$("textarea[name=myField]").val()+'&myCheckboxes='+myCheckboxes,
            success: function(data)
                $('#myResponse').html(data)
            
        );
        return false;
);
);

</script>

在 myurl.php 上你可以使用print_r($_POST['myCheckboxes']);

【讨论】:

【参考方案5】:
    $.post("test.php",  'choices[]': ["Jon", "Susan"] );

所以我会遍历选中的框并构建数组。类似的东西。

       var data =  'user_ids[]' : [];
        $(":checked").each(function() 
       data['user_ids[]'].push($(this).val());
       );
        $.post("ajax.php", data);

【讨论】:

【参考方案6】:

你也可以试试这个,

var arr = $('input[name="myCheckboxes[]"]').map(function()
  return $(this).val();
).get();

console.log(arr);

【讨论】:

以上是关于通过 jQuery ajax() 向 PHP 发送多个复选框数据的主要内容,如果未能解决你的问题,请参考以下文章

使用 Ajax 和 PHP 向 MySQL 发送数据

通过 jQuery.Ajax 向 MVC 控制器发送多个项目

如何在 jquery 中创建关联数组并通过 ajax 发送以使用 php 解析?

如何通过 AJAX 将 jquery 对象数据发送到 php?

Laravel CSRF 令牌不匹配异常。通过 jQuery ajax 向资源路由发送“Put”请求

将 PHP $_POST 数组传递给 javascript/jQuery 以通过 ajax 发送回 PHP