jquery AJAX 执行其功能,但页面刷新

von4xj4u  于 2023-03-29  发布在  jQuery
关注(0)|答案(1)|浏览(175)

我的django web应用程序有一个表单来添加商品到购物车。我写 AJAX 代码,这样在添加商品时,页面不会刷新。结果是商品添加到购物车,但带有json-response的页面打开 {“success”:true}
我在www.example.com中看到views.py'product_id'写了两次,但我不知道哪一个更好。

查看次数.py

def add_to_cart(request, product_id):
    if request.method == 'POST':
        product_id = request.POST.get('product_id')
        quantity = 1
        user = request.user

        cart_item = CartItem.objects.create(product_id=product_id, quantity=quantity, user=user)
        cart_item.save()

        data = {'success': True}
        return JsonResponse(data)
    else:
        data = {'success': False, 'error': 'error'}
        return JsonResponse(data, status=400)

urls.pypath('add_to_cart/<int:product_id>/', views.add_to_cart, name='add_to_cart'),
产品详细信息.html

<form action="{% url 'add_to_cart' single_product.id %}" method="POST" id="add-to-cart-form">
{% csrf_token %}
<input type="hidden" name="product_id" value="{{ single_product.id }}">
<button type="submit" class="btn btn-primary">Add</button>
</form>

脚本.js

$(document).ready(function() {
  $('#add-to-cart-form').on('submit', function(event) {
    event.preventDefault();

    var url = $(this).attr('action');
    var data = $(this).serialize();
     
    $.ajax({
      url: url,
      method: 'POST',
      data: data,
      success: function(response) {
        console.log(response);
      },
      error: function(xhr, status, error) {
        console.log(error);
      }
    });
  });
});

控制台中未写入任何内容。

JQuery工作正常,我检查了此脚本。

<script src="{% static '/js/jquery-3.6.4.min.js' %}" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    console.log('jQuery is working!');
  });
</script>
omvjsjqw

omvjsjqw1#

我在本地重新创建了你的代码,它完全按照你的期望工作, AJAX 到达了回调,表单没有提交自己。
也许可以试试这个。这不是一个答案,但可能会发现一些东西。我假设你正在使用Chrome调试器。

  • 检查源代码。表单看起来是否与您期望的一样,还是格式不正确?
  • 在Chrome调试器上启用保留日志,断点位于处理程序的preventdefault,并 AJAX 回调和错误处理程序中,然后单击添加按钮并逐步完成。

相关问题