Question

我需要在点击提交按钮时重新加载页面。新页面应显示的内容取决于之前为重新加载选择的复选框。我的问题是，当我点击“提交”时，$("button").click(function()...会获取正确的值，但$(document).ready(function ()...始终使用值true（默认选中）。

如何在重新加载之前保存这些值，以便我可以在$(document).ready(function ()...上使用它们？我可以将它们作为数据参数

发送

$(document).ready(function() {
    var selectedCheckboxes = new Array();

    $.ajax({
        url: 'getNewForm.php?accion=value1',
        data: 'selectedCheckboxes',
        dataType: 'json',
        error: function() {
          alert("ERROR");
        },
        success: function(res) {
          //Do something
        }
      }
    });

  $("button").click(function() {

    var selectedCheckboxes = new Array();
    selectedCheckboxes[0] = document.getElementById("checkbox1").checked;
    selectedCheckboxes[1] = document.getElementById("checkbox1").checked;
  });

});

注意：我曾var selectedCheckboxes两次尝试获得不同的结果，不知道应该在哪里做。

Answer 1

这里有几个问题：

您的代码示例中存在语法错误。确保发布到StackOverflow的代码编译并运行时没有语法错误（假设您没有问为什么特定代码段会产生语法错误:)。
您的AJAX请求的data属性被错误地指定为文字字符串'selectedCheckboxes'，这意味着您的浏览器会将文字字符串“selectedCheckboxes”作为有效负载发送到您的服务器。
此外，正如您所猜测的那样，您无法正确处理selectedCheckboxes的初始化。在JS中用var初始化的变量的范围限定在包含函数中，这意味着selectedCheckboxes处理程序中的click()声明永远不会在它之外被看到。
此外，您获得两次“checkbox1”的值;你可能想得到一个名为“checkbox2”或类似的东西。相关：如果您只是序列化表单中的唯一输入，请使用jquery的serialize()方法，以减少代码。
如果您真的正在重新加载整个页面，请不要使用AJAX请求来执行此操作？当您不想要重新加载整个页面时（见下文），使用AJAX进行表单提交很常见，但对于您所声明的用例，它会增加您不需要的复杂性。只需要一个包含复选框和提交按钮的简单表单，然后让浏览器执行默认操作。

以下是使用AJAX在幕后提交表单而不重新加载整个页面的示例：

http://jsfiddle.net/Palpatim/rLeGv/

鉴于HTML：

<form id="checkboxForm">
    <input type="checkbox" name="check" value="check1" checked="checked" id="ch1"/>
    <label for="ch1">check1</label>
    <br/>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2" />
    <label for="ch2">check2</label>
    <br/>
    <button>Click me</button>
</form>

单击按钮时，此JS将提交表单：

$(document).ready(function() {
  $("button").click(function() {
    $.ajax({
      url: 'getNewForm.php?accion=value1',
      data: $('#checkboxForm').serialize(),
      dataType: 'json',
      error: function() {
        alert("ERROR");
      },
      success: function(res) {
        alert("SUCCESS");
      }
    });
  });
});

就使用之前的选择加载新页面而言，您必须以某种方式维护状态。您的选项包括将状态从服务器传回，将选择存储在浏览器的本地存储或cookie中。我建议将状态从服务器传回，但你的用例有点不清楚。

如何在ajax中使用checkbox值asdata参数

1 个答案: