我已经创建了基本的购物篮，我可以在其中添加产品到我的会话中。我添加了ajax，以便每当我向我的购物篮添加内容时都不会重新载入我的网站。 问题在于我用for循环生成了表单。每个表单都有隐藏的输入，其中包含我要添加的产品和数量的ID。我找到一个解决方案有问题，如何让jquery听取表格的ID（有ID的产品）。我知道我可以做到的每一个：
$(this).attr('id');
但是当我尝试按下按钮时，第一个按钮就可以了。但是当我按下另一个生成它不会做ajax时，它会在我的views.py中的第二部分，我检查请求是否不是ajax。 并且它发生在＆gt;的所有按钮上。第一。 我发布了我的代码：
jquery的：
$(document).ready(function () {
//$('#custom_user_form').on('submit', function (event) {
// event.preventDefault();
// add_product();
//
//});
$('button[type=submit]').on('click', function (event) {
event.preventDefault();
add_product();
});
//$('button[type=submit]').on('click', function(){
// var post_primary_key = $(this).attr('id').split('-')[2];
// console.log(post_primary_key)
// delete_message(post_primary_key);
//});
function add_product() {
$.ajax({
url: window.location.pathname+'add_product/',
type: 'POST',
datatype: 'json',
async: false,
data: {
product_id: $('#product_id').val(),
quantity: $('#quantity').val(),
csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()
},
success: function (json) {
$('#quantity').val(0);
$('#price span').remove();
$("#price").prepend("<span><strong> <h3>Overall price of all your products in basket: </strong> " + json.price + "$$$</h3>Recently added products: " + json.name + "</span>");
console.log("success");
}
});
};
}）;
我的模板生成表单：
<tbody>
{% if products %}
{% for p in products %}
<tr>
<th scope="row">{{ p.id }}</th>
<td>{{p.name}}</td>
<td>{{p.price}} $</td>
<td>{{p.stock}} units</td>
{% if user.is_authenticated %}
<form id="custom_user_form" method="post" action="add_product/">
<td>
{% csrf_token %}
{{ add_product_form.as_p }}
<!-- Provide a button to click to submit the form. -->
<input id="product_id" type="number" name="product_id" value={{p.id}} hidden="True" />
<input type="number" id="quantity" name="quantity" value="0" min="0" max="{{p.stock}}" style="width: 100px"/>
</td>
<td>
<button type="submit" id = "{{p.id}}" class="btn btn-primary">Add</button>
</td>
</form>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{％endif％}
最后是我的views.py
def add_to_cart(request, category_id):
if request.is_ajax():
if request.method == 'POST':
product_id = request.POST.get('product_id')
quantity = request.POST.get('quantity')
price = 0.0
if not request.session.get('koszyk').get(product_id, None):
request.session['koszyk'][request.POST.get('product_id')] = 0
item = ShopProduct.objects.get(id = product_id)
quantity = float(quantity)
item_price = float(item.price)
price += quantity * item_price
item.stock -= quantity
item.save()
request.session['koszyk'][request.POST.get('product_id')] += int(request.POST.get('quantity'))
request.session['koszyk']['cena'] += price
new_item = ShopProduct.objects.get(id = product_id)
name = new_item.name
print "_"*100
print name
price = request.session['koszyk']['cena']
status = 200
data = {'status': 200, 'price': price, 'name': name}
return HttpResponse(json.dumps(data), content_type="application/json")
elif not request.is_ajax() and request.method == 'POST':
add_product_form = AddProductForm(data=request.POST, request_product_id=request.POST['product_id'])
price = 0
print "JEBLEM PIRNTA "*100
if add_product_form.is_valid():
if not request.session.get('koszyk').get(request.POST.get('product_id'), None):
request.session['koszyk'][request.POST.get('product_id')] = 0
item = ShopProduct.objects.get(id=request.POST.get('product_id'))
quantity = float(request.POST.get('quantity'))
item_price = float(item.price)
price += quantity * item_price
item.stock -= quantity
item.save()
request.session['koszyk'][request.POST.get('product_id')] += add_product_form.cleaned_data['quantity']
request.session['koszyk']['cena'] += price
products_list = ShopProduct.objects.all()
else:
print add_product_form.errors
messages.error(request, 'Smth went wrong, check log')
else:
add_product_form = AddProductForm()
koszyk = request.session['koszyk']
products_list = ShopProduct.objects.all()
return render(request, 'tango/cart.html', {'products_list': products_list}, context_instance=RequestContext(request))
问题是我如何倾听这些ID？
答案 0 :(得分：0)
您有多个具有相同ID（product_id，quantity）的html元素。所以当你使用jquery获得价值时，你会有不一致的地方。尝试使用单击按钮的相对位置获取值，因此如果您知道单击了按钮，则可以找到相对于单击按钮的product_id和quantity元素。
也不要使用提交按钮进行ajax调用，使用输入类型=＆＃34;按钮＆＃34;以防止不必要的回发。
查看：Jquery Find Method和attribute Equal Selector按名称而不是ID
查找元素答案 1 :(得分：0)
重复的HTML ID是没有意义的，因此从多个产品表单中清除它们，有利于类。
<form class="product_form" method="post" action="add_product/">
<td>
{% csrf_token %}
{{ add_product_form.as_p }}
<input type="hidden" class="product_id" name="product_id" value={{p.id}} />
<input type="number" class="quantity" name="quantity" value="0" min="0" max="{{p.stock}}" style="width: 100px"/>
</td>
<td>
<button type="submit" class="btn btn-primary">Add</button>
</td>
</form>
现在将add_product函数作为所有表单的提交处理程序附加。在处理程序中，按类选择所有内容，而不是id。
评论中的进一步说明
$(document).ready(function() {
$('.product_form').on('submit', function(event) {
event.preventDefault();
//remember the form element
var $form = $(this);
//disable the submit button and remember it for later
var $button = $form.find("button[type='submit']").attr('disabled', true);
//find the product_id, quantity and price fields in the form
var $price = $form.find(".price");
var $product_id = $form.find(".product_id");
var $quantity = $form.find(".quantity");
//Now do the ajax
$.ajax({
url: window.location.pathname + 'add_product/',
type: 'POST',
datatype: 'json',
// async: false,//NO, never use async: false!!!
data: {
product_id: $product_id.val(),
quantity: $quantity.val(),
csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()
}
}).then(function(json) {
$price.find("span").remove();
$quantity.val(0);
$price.prepend("<span><strong> <h3>Overall price of all your products in basket: </strong> " + json.price + "$$$</h3>Recently added products: " + json.name + "</span>");
}, function() {
//here give the user some indication that the ajax failed
}).always(function() {
$button.attr('disabled', false);
});
});
});
这里并不是绝对必要，但您应该养成使用承诺方法的习惯，.then()，.done()，.fail()和.always()由$.ajax（）返回的对象提供。有关morfe信息，请参阅the documentation