Question

因此，使用下面的代码 - 检查的每个复选框都会导致发送ajax请求。但是我想要的是一个单独的ajax请求，其中所有复选框的名称都在有效负载中发送。我怎么能这样做？在Python中，我只是创建一个列表或字典并发送 - 但不知道如何使用js。

function save_product(data) {
    $('input[class="product"]:checked').each(function() {
        $.ajax({
            type:"GET",
            url:"/edit_view/",
            data: {
                product_name:name,
            },
            success: function(data){}
        });
    })
}

Answer 1

我想要的是一个单独的ajax请求，其中所有复选框的名称都在有效负载中发送

在Python中，我只是创建一个列表或字典并发送 - 但不知道如何使用js

直观地就像在Python中一样

function save_product(data) {
  var products = []
  $('input[class="product"]:checked').each(function(chk) {
    var product = chk.val()
    products.push(product)
  });

  $.ajax({
    type:"GET",
    url:"/edit_view/",
    data: {
      product_name: products,
    },
    success: function(data){
      // Handle response
    }
  });
}

你可以利用各种js糖和jquery糖。 .map是开始思考函数式编程的好工具。像这样：

var products = $('input[class="product"]:checked').map(function(chk) {
  return chk.val()
})
// products === [1, 7, 12]
// assuming you put the product.id inside checkbox value= attribute

上面的@Karan Patel回答使用了一个lambda表达式，它是ES6，如果在浏览器中运行代码之前没有transpile代码，可能不适合你。但请确保您可以使用chk => chk.val()等同于function(chk) { return chk.val() }来简化它，如下所示：

var products = $('input[class="product"]:checked').map(chk => chk.val())

加分：

1）

如果你正在启动javascript，你应该从现在开始为每个异步操作留下“回调模式”，并开始至少使用“Promise模式”。阅读this。

像这样：

$.ajax({
  type:"GET",
  url:"/edit_view/",
  data: {
    product_name: products,
  }
})
.then(function(data) {
  // Handle response
})
.catch(function(err) {
  // Handle error
});

2）

您使用input[class="product"]对产品值进行定位和分组，您可以简化input.product。 对attribute selector 非常小心，因为在您的语法中，<input class="product custom-product"> 将与您的选择器不匹配（您的目标完全 product课程中的单词。但在您的确切情况下，您可能希望使用类似form.my-form input[name=product_name]的目标

更加语义和准确地定位您的输入

<form class="my-form">
  <input type="checkbox" name="product_name" value="1" />
  <input type="checkbox" name="product_name" value="2" />
</form>

（名称属性精确设计用于唯一标识输入）

3）最后，仅仅因为你必须听到它，现在这样一个简单的操作不需要jQuery

这里我使用普通的js来获取值，并使用axios来获取这些东西。

var productsChks = document.querySelectorAll('input.product')
var products = products.map(productChk => productChk.value)

axios.get('/edit_view/', {data: products})
.then(function(data) {
  // Handle data
})

小心browser support

请注意，您还可以使用本机浏览器API for ajax，fetch，谨慎使用browser support以及可能需要polyfill

如何使用多个值动态构造ajax负载

1 个答案: