我的 AJAX 工作正常，我想知道为什么

Question

在我的应用程序中，我创建了一个用户可以使用 AJAX 填充的收藏列表。 它是否工作正常，但我不确定我是否以正确的方式进行操作，我想知道如何以正确的方式进行操作。 或者也许我做对了。

我的 html：

<div class='sub_button'>            
                    <form class="add_btn" method='post'>{% csrf_token %}
                    <button class='added btn' value= '{{product.id }} {{ sub_product.id }}' ><i class=' fas fa-save'></i></button>                            
    </div>

我的 AJAX：

$(".row").on('click', ".added", function(event) {
    let addedBtn = $(this);
    console.log(addedBtn)
    event.preventDefault();        
    var product = $(this).val();
    var url = '/finder/add/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])            
          addedBtn.hide();             
        }
    }); 
});

我的观点.py

def add(request):
    data = {'success': False} 
    if request.method=='POST':
        product = request.POST.get('product')
        user = request.user       
        splitted = product.split(' ')
        sub_product = Product.objects.get(pk=(splitted[1]))
        original_product = Product.objects.get(pk=(splitted[0]))       
        p = SavedProduct(username= user, sub_product=sub_product, original_product = original_product)
        p.save()        
        data['success'] = True
    return JsonResponse(data)

困扰我的是我通过'{{product.id }} {{ sub_product.id }}'方式。 因为经过一番修修补补，我做到了。

Answer 1

有更好的方法来做到这一点。

即，如果您在此页面实例中只有一个product.id和sub_product.id 。 然后在此页面的 HTML 模板末尾的脚本标记中添加以下内容：

<script>
    var product_id = {{ product.id }}
    var sub_product_id = {{ sub_product.id }}
</script>

然后，您可以使用另一个脚本标记将包含 AJAX 的外部 JS 文件链接到此 HTML 模板。

现在您的product_id和sub_product_id将在您拥有 AJAX 代码的外部 JS 脚本文件中可用。

这样，您不必通过button标签的 value 属性传递它，并且看起来更干净。