使用 jQuery 和 ajax() 方法从复选框传递参数

Question

我正在尝试从 JSON 响应中获取一些条目 https://jsonplaceholder.typicode.com/posts 通过使用 jQuery 和 ajax() 方法选择复选框。

我可以使用 Chrome DevTools 看到发出了 2 个请求，一个是“文档”类型，一个是“XHR”类型。对于第一个响应是正确的，但对于第二个没有响应。它们是这样的：

请求网址：https://jsonplaceholder.typicode.com/posts?userId%5B%5D=3&userId%5B%5D=4 带有查询字符串参数： 用户 ID[]: 3 用户 ID[]: 4

请求网址：https://jsonplaceholder.typicode.com/posts?userId=3&userId=4 带有查询字符串参数： 用户ID：3 用户 ID：4

这就是我的 HTML、JavaScript 和 jQuery 的样子：

HTML

<form id="myForm" action="https://jsonplaceholder.typicode.com/posts">
 <input type="checkbox" id="Checkbox1" name = "userId" value = "1" />
<input type="checkbox" id="Checkbox2" name = "userId" value = "2" />
<input type="checkbox" id="Checkbox3" name = "userId" value = "3" />
<input type="checkbox" id="Checkbox4" name = "userId" value = "4" />
<input type="button" id="demo" value = "Demo" />
<input type="submit" id="submit">
</form> 

JavaScript+ jQuery

var url = "https://jsonplaceholder.typicode.com/posts";

$("#submit").click(function() {
    var allVals = new Array();  
    $("input:checkbox[name=userId]:checked").each(function () {
    allVals.push($(this).val());
    console.log(allVals);

      $.ajax({
              url: url,
              data: {
              userId: allVals
          },
              type: "GET",
              dataType: "json",
        })
        .done(function (json) {
          console.log(json);

        }); 
});
    });

在 jQuery 文档中声明“数据”选项必须是对象或查询字符串。但是我有一个数组。那么我该如何处理这种情况呢？我已经尝试了一些东西，但我无法让它工作。为什么第一个请求是正确的？ （我实际上不需要它）我怎样才能只启动 XHR 请求？

Answer 1

您需要阻止默认提交操作，因为您正在处理代码中的点击事件。 您看到的文档提交是默认的表单提交操作，而 Xhr 请求是您的 ajax 调用。

尝试处理表单提交事件

<form id="myForm" action="https://jsonplaceholder.typicode.com/posts">
    <input type="checkbox" id="Checkbox1" name = "userId" value = "1" />
    <input type="checkbox" id="Checkbox2" name = "userId" value = "2" />
    <input type="checkbox" id="Checkbox3" name = "userId" value = "3" />
    <input type="checkbox" id="Checkbox4" name = "userId" value = "4" />
    <input type="button" id="demo" value = "Demo" />
    <input type="submit" id="submit">
</form> 

JS

$("#myForm").submit(function(e) {
    e.preventDefault(); //This line will prevent the default form submit action
    var allVals = new Array();  
    $("input:checkbox[name=userId]:checked").each(function () {
    allVals.push($(this).val());
    console.log(allVals);

      $.ajax({
              url: url,
              data: {
              userId: allVals
          },
              type: "GET",
              dataType: "json",
        })
        .done(function (json) {
          console.log(json);

        }); 
    });
});

Answer 2

诀窍是将“传统”选项设置为 true 并从 each() 函数中删除 ajax()。

http://api.jquery.com/jQuery.ajax/

JavaScript+ jQuery

var url = "https://jsonplaceholder.typicode.com/posts";

$("#submit").click(function(event) {
event.preventDefault(); //This line will prevent the default form submit action
    allVals = []
    $("input:checkbox[name=userId]:checked").each(function () {
    allVals.push(this.value);
    console.log(allVals);
});
      $.ajax({
          url: url,
          data: {
            userId: allVals
          },
          type: "GET",
          dataType: "json",
          traditional: true
        })
        .done(function (json) {
          console.log(json);
        });
});