通过 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 @AndymyCheckboxes.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 发送多个复选框数据的主要内容,如果未能解决你的问题,请参考以下文章
通过 jQuery.Ajax 向 MVC 控制器发送多个项目
如何在 jquery 中创建关联数组并通过 ajax 发送以使用 php 解析?
如何通过 AJAX 将 jquery 对象数据发送到 php?