在 Django 3.1.4 中使用 ajax 后 preventDefault() 不起作用

问题描述

我懂一点javascript。但是在教程中我必须添加一些 jquery 和 ajax 功能。 这是一个表格：

<form class="form-product-ajax" method="POST" action="{% url 'carts:update' %}" class="form">
{% csrf_token %}
<input type="hidden" name="product_id" value=" {{p    roduct.id}} "/>
{% if in_cart %}

<button type="submit" class="btn btn-link btn-sm" style="padding:0px;cursor:pointer;" name="button">Remove?</button>

{% else %}
<span class="submit-span">
{% if product in cart.products.all %}

  In cart<button type="submit" class="btn btn-danger" name="button">Remove?</button>
{% else %}

  <button type="submit" class="btn btn-success" name="button">Add to cart</button>
{% endif %}
</span>
{% endif %}
</form>

我的 jquery 和 ajax：

<script type="text/javascript">
$(document).ready(function(){
var productForm=$(".form-product-ajax")
productForm.submit(function(event){
  event.preventDefault();
  var thisForm=$(this)
  var actionEndpoint=thisForm.attr("action");
  var httpMethod=thisForm.attr("method");
  var formData=thisForm.serialize();


 $.ajax({
    url:actionEndpoint,method:httpMethod,data:formData,type : 'POST',success: function(data){
     var submitSpan = thisForm.find(".submit-span")
      if(data.added){
        submitSpan.html("<button type="submit" class="btn btn-danger" name="button">Remove?</button>")
      }else{
   submitSpan.html("<button type="submit" class="btn btn-success" name="button">Add to cart</button>")
     }

   },error: function(errorData){

 }
 })

  })

})

</script>

这是我的 views.py 的功能：

def cart_update(request):
#print(request.POST)
product_id=request.POST.get('product_id')

if product_id is not None:
    try:
        product_obj=Product.objects.get(id=product_id)
    except Product.DoesNotExist:
        print("Produuct does not exists")
        return redirect("cart:home")
    cart_obj,new_obj=Cart.objects.new_or_get(request)
    if product_obj in cart_obj.products.all():
        cart_obj.products.remove(product_obj)
        added=False
    else:
        cart_obj.products.add(product_obj)
        added=True
    request.session['cart_items']=cart_obj.products.count()
    if request.is_ajax():
        print("Ajax request")
        json_data={
            "added": added,"removed": not added,}
        return JsonResponse(json_data)

#return redirect(product_obj.get_absolute_url())
return redirect("carts:home")

jquery 和 ajax 版本：

{% load static %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

我不明白为什么 event.preventDefault();每当我在我的项目中添加 $.ajax 时都不起作用。如果我将其注释掉 event.preventDefault();看起来不错。毕竟 ajax 不适用于我的项目。

解决方法

根据 django 3.1 发行说明：

HttpRequest.is_ajax() 方法已被弃用，因为它依赖于 jQuery 特定的方式来表示 AJAX 调用，而当前的用法倾向于使用 JavaScript Fetch API。根据您的用例，您可以编写自己的 AJAX 检测方法，或者如果您的代码依赖于客户端接受 HTTP 标头，则使用新的 HttpRequest.accepts() 方法。

如果您正在编写自己的 AJAX 检测方法，request.is_ajax() 可以完全复制为 request.headers.get('x-requested-with') == 'XMLHttpRequest'。

,

我在这段代码中找到了确切的问题。if条件下面的submitSpan.html的内容应该是单引号的。

submitSpan.html('<button type="submit" class="btn btn-danger" name="button">Remove?</button>')

这就是控制台向我显示此错误的原因：

(index):138 Uncaught SyntaxError: missing ) after argument list