我已成功将我的商品添加到购物车中。但是,我只是希望它在ajax刷新(排序)'#cart'div,同时仍然在原始页面上。换句话说,该项目已添加到购物车中,但仅在我手动刷新时显示。我只是希望它看起来很流畅和ajax-y。
Views.py:
@login_required
def add(request, profile):
if request.method != 'POST':
return HttpResponseNotAllowed('POST')
try:
item = Item.objects.get(slug=slugify(request.POST['itemname']))
except ObjectDoesNotExist:
item = Item(name=request.POST['itemname'])
item.save()
profile = Profile.objects.get(user=request.user)
profile.items.add(item)
response = simplejson.dumps(
{"status": "Successfully added."}
)
return HttpResponse (response, mimetype='application/json')
模板:
<form id="addItemForm" class="form-style" method="POST" action="/item/add/{{ profile }}/">
{% csrf_token %}
<input id="item-input" class="input-text inline required" name="itemname" type="text" />
<button class="blue" type="submit" id="additem">
Add Item
</button>
</form>
脚本:
$('#addItemForm').submit(function(e){
e.preventDefault();
var form = $("#additem").attr("action");
var post_data = $.post($(this).attr('action'), $(this).serialize(), function(data, textStatus, jqXHR){
$('.item-selection').html(data);
result = $.ajax({
url: form,
data: post_data,
type: "POST",
success: function(data) {
//alert("Successfully added");
console.log()
$("#item-selection").replaceWith($('#item-selection', $(html)));
//{[( THIS IS WHERE I'D LIKE IT TO REFRESH)]}
},
error: function(data) {
// return the user to the add item form
$('#addItemForm').html(data);
}
});
});
控制台错误:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
(我为格式化道歉) 我是ajax初学者。我的脚本显然有问题。我只是不知道从哪里开始。
提前感谢您的帮助。
答案 0 :(得分:1)
我无法在你的代码中看到你的意思。但是这应该重新加载#cart元素..虽然有一个更好的方法可以做到这一点,而不是仅为一个元素上的内容再次下载整个页面
$('#cart').load('ajax/test.html #cart');