AJAX-PHP 组合：$.post 复选框值到 PHP答案

【问题标题】：AJAX-PHP Combination: $.post Checkbox value to PHPAJAX-PHP 组合：$.post 复选框值到 PHP
【发布时间】：2013-02-15 11:44:20
【问题描述】：

我尝试了几天来解决这个问题，但到目前为止还没有结果...
我要做的就是在用户选中或取消选中它时将复选框值发布到 php。

form.php:

<?php
if (isset($_POST['box'])) {
echo $_POST['box'];
} ?>

脚本：

<script>
$(document).ready(function() {
 $('.box').on('change', function(event) { 
  var checkbox = $(event.target);
  var isChecked = $(checkbox).is(':checked');
  $.post('/form.php', {id: checkbox.attr('id'), value: isChecked});
 });
}); 
</script> //Credit cymen

表格：

<form action="form.php" method="post">

<input id="box" class="box" name="box" type="checkbox" value="YESSSSSS!" />
<input id="box" class="box" name="box" type="checkbox" value="YESSSSSS!" />

</form>

(*) 我在$_POST['box'] 上一无所获

【问题讨论】：

首先，每个复选框的 id 必须是唯一的！
验证您的 html ... id 必须是唯一的
但我有很多。 php怎么知道我指的是哪一个？
@wizard 一般而言，输入的name 属性对应于您发布表单时包含其值的请求参数。
@wizard，元素id 永远不会发送到服务器，只有它的name 和value。对于您在这里所做的事情，不需要id，因为您使用类名来选择复选框。

标签： php javascript jquery ajax checkbox

【解决方案1】：

您的 JavaScript 正在将此数据提交给 PHP：

 {id: checkbox.attr('id'), value: isChecked}

那里有两条数据：“id”和“value”。您没有名为“box”的数据，因此不会填充 $_POST['box']。

【讨论】：

你的意思是：{id: checkbox.attr('box'), value: isChecked}？试试看 - 它不起作用。
@wizard — 不。你没有<input box="anything"> 是吗？这仍然会提交id 的东西，而您正在数据中寻找box。如果您想将id 提交为$_POST['box'] 然后{box:...。

【解决方案2】：

您发送到 form.php 的 $_POST 数组看起来不是 $_POST['box']。它看起来像这样：

array(2) {["id"]=>string(3) "box" ["value"]=> string(4) "true"}

所以你可以访问像 thist $_POST['id'] 或 $_POST['value'] 这样的变量。你在这个片段中声明 JS 中的变量：{id: checkbox.attr('id'), value: isChecked}。

最好使用 var_dump 在 PHP 中检查您在 vars 中的内容，例如。 var_dump($_POST)。

使用Firebug插件来FF，调试AJAX。

【讨论】：

【解决方案3】：

我会改成：

$.post('/form.php', {name: checkbox.attr('name'), checked: isChecked, value : checkbox.val()});

在 PHP 端，您将收到：

Array
(
    [name] => box
    [checked] => true
    [value] => YESSSSSS!
)

您可以像这样访问 POST 数据：

echo $_POST['name']; // box
echo $_POST['checked']; // true/false
echo $_POST['value']; // YESSSSSS!

在 POST 请求中包含复选框值很重要，因为这是您识别哪个复选框已更改的唯一方法。

【讨论】：

不幸的是它仍然无法正常工作....尽管一切似乎都在正确的位置。