我想在购物车中添加产品而不用 AJAX 和 Django 刷新页面

Posted 2023-02-23

【中文标题】我想在购物车中添加产品而不用 AJAX 和 Django 刷新页面

【英文标题】：I want to add product in cart without refreshing page with AJAX and Django

【发布时间】：2021-05-09 19:02:53

【问题描述】：

当我在购物车中提交产品时，什么都不会发生。我想在不刷新页面的情况下使用 AJAX。 当我提交控制台消息时将显示。 我正在尝试首先使用 AJAX。 尝试在不刷新页面的情况下将产品添加到购物车中。 我需要帮助:)

查看 Django

def add_cart(request, product_id):
    cart = Cart(request)
    product = get_object_or_404(Product, id=product_id)

    form = CartProductForm(request.POST)
       
    if form.is_valid():
        cd = form.cleaned_data
        cart.add(product=product,
                quantity=cd['quantity'],
                update_quantity=cd['update_qt']
                )
                
    return JsonResponse('status': 'success') 

表格

from django import forms
from django.core.validators import MinValueValidator, MaxValueValidator

class CartProductForm(forms.Form):
    quantity = forms.IntegerField(initial=1)
    update_qt = forms.BooleanField(required=False, initial=False, widget=forms.HiddenInput)

HTML 代码

<form action="% url "..." %"  method="post" data-id=" ... " class="form-order" id="form">
     cart_product_form 
    % csrf_token %
    <a data-id=" ... " class="buy-product"><button>BUY</button></a>
</form>

JS 代码

        $(".buy-product").on('click', function(e)
            e.preventDefault();
            var product_id = $(this).attr('data-id')
            var quantity = 1
            console.log(product_id)
            console.log(quantity)

            data = 
                'product_id': product_id,
                'quantity': quantity
            
            var point='/cart/add/'+product_id+'/'
            
            $.ajax(
                headers:
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
                ,
                url: point,
                type: 'POST',


                data: data,

                success: function(data)
                    console.log('success')
                    console.log(csrftoken)
                    
                
        )
    )

【参考方案1】：

您可以阻止表单刷新页面，然后使用您的 JS 代码执行您需要的任何操作：

<form action="% url "..." %"  method="post" data-id=" ... " class="form-order" id="form" onsubmit="myFunction(event)">
...
</form>
<script>
function myFunction(event)
    event.preventDefault();

</script>

【讨论】：

当我这样做时，什么都不会发生。

这实际上就是它的作用——防止表单提交时的默认行为，包括页面重新加载，让您以任何您需要的方式自行处理。

如何防止表单的默认行为？ PreventDefault 允许不重新加载页面。

表单的默认行为是发送post请求，点击提交按钮后，导致页面重新加载。当您使用 preventDefault 时，您将独自发送帖子请求和处理响应。

【参考方案2】：

您需要在数据中添加csrftoken：csrfmiddlewaretoken':csrftoken。我也看不到你什么时候初始化你的变量，但我认为这只是一个例子。检查此答案以获取更多信息：link

【讨论】：

当我在视图中单击添加 is_ajax 方法时出现错误 500。

想一想。我刚刚看到您将带有一些 id 的数据 point 硬编码 url。在您的情况下，没有必要输入product_id 参数，但如果您更愿意保留它，只需检查此answer。我想注意到你解决问题的方法比仅仅删除 url product_id 参数要困难得多。看看你已经在数据中发送了这个变量。为什么要复制它？