代码之家 › 专栏 › 技术社区 › david

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

jquery javascript

david · 技术社区 · 7 年前

所以下面的代码-选中的每个复选框都会导致发送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){}
        });
    })
}

1 回复 | 直到 7 年前

Cyril CHAPON 7 年前

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
    }
  });
}

.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

transpile chk => chk.val() function(chk) { return chk.val() }

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

this

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

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>

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

fetch browser support polyfill