如何使用多个值动态构造ajax有效负载
因此，在下面的代码中，每个选中的复选框都会导致发送一个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
Stack Overflow用户
发布于 2018-06-11 15:31:51
我想要的是一个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 answer上面使用了一个λ表达式，它是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.product的input[class="product"]对产品价值进行定位和分组。要非常小心使用 ，因为在你的语法中，<input class="product custom-product"> 不会匹配你的选择器(你的目标是 product word in class。但在精确的情况下，您可能希望更有语义、更准确地将您的输入作为目标，比如form.my-form input[name=product_name] to target
<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来获取ajax之类的东西。
var productsChks = document.querySelectorAll('input.product')
var products = products.map(productChk => productChk.value)
axios.get('/edit_view/', {data: products})
.then(function(data) {
// Handle data
})注意，您还可以为ajax、fetch使用本机浏览器API，但仍然要注意browser support和潜在的polyfill需求
https://stackoverflow.com/questions/50776365
复制相似问题