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

【问题标题】：preventDefault() not working after use of ajax in Django 3.1.4在 Django 3.1.4 中使用 ajax 后 preventDefault() 不起作用
【发布时间】：2021-01-13 17:07:07
【问题描述】：

我懂一点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 不适用于我的项目。

【问题讨论】：

标签： javascript jquery django ajax preventdefault

【解决方案1】：

根据 django 3.1 发行说明：

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

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

【讨论】：

我用 request.accepts() 替换了 request.is_ajax()，但它给了我以下错误：accepts() missing 1 required positional argument: 'media_type'
您应该将request.is_ajax() 替换为request.headers.get('x-requested-with') == 'XMLHttpRequest'。
我更换了，但还是不行。在 if 条件下，Ajax 请求应该在终端上打印，json_data 也没有通过，return redirect("carts:home") 仍然有效。仍然没有运气。
(index):138 Uncaught SyntaxError: missing ) after argument list ...错误显示在控制台中。

【解决方案2】：

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

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

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

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

【讨论】：