Django集成Ajax报错：'WSGIRequest'对象无'is_ajax'属性

错误原因 #

Django 3.1及更高版本已经移除了request.is_ajax()方法。这个方法原本依赖X-Requested-With: XMLHttpRequest请求头判断AJAX请求，但官方认为该方式不够可靠，因此直接调用会抛出AttributeError。

修复步骤及代码调整 #

1. 后端视图（views.py）调整

替换is_ajax()的判断逻辑，同时修正request.POST.get的调用错误（原代码用了方括号，get是方法需用括号）：

from django.shortcuts import render
from django.http import JsonResponse

# 移除@csrf_exempt，改用安全的CSRF令牌传递
def order(request):
    # 手动判断AJAX请求
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    if is_ajax:
        test = request.POST.get('test')
        print(test)
        # AJAX请求返回JSON响应而非页面
        return JsonResponse({'status': 'success', 'received_data': test})
    
    ctx = {'active_link': 'order'}
    return render(request, 'food/order.html', ctx)

2. 前端JS（cart.js）调整

添加CSRF令牌传递，修正URL生成方式（推荐用Django模板标签生成，避免硬编码路径）：

function order(){
    var test='Ajax test';
    // 使用模板标签生成正确的URL（需确保URLconf中给order视图命名，比如name='order'）
    var ur='{% url "order" %}'; 
    var orderData={};
    orderData['test']=test;
    
    // 获取页面中的CSRF令牌
    var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    $.ajax({
        url:ur,
        type:'POST',
        headers: {
            'X-CSRFToken': csrftoken,
            'X-Requested-With': 'XMLHttpRequest' // 供后端判断AJAX请求
        },
        data:orderData,
        success:function(data){
            console.log("Data sent successfully:", data);
        },
        error:function(xhr){
            console.error("Request failed:", xhr.responseText);
        }
    })
}

3. 前端模板（order.html）调整

• 添加CSRF令牌输入框（如果base.html中没有的话）
• 修改按钮类型为button，避免触发默认表单提交行为：

{% extends 'food/base.html' %}
{% load static %}
{% block title %}Order Food here {% endblock %}
{% block content %}

<!-- 添加CSRF令牌，Django会自动生成隐藏输入框 -->
{% csrf_token %}

<div class="container-fluid m-4">
    <div class="row">
    <div class="col-md-6 text-center">
        <h3>Order</h3>
        <div class="row">
            <div class="col-md-6" id="name">
                <h5>Name</h5>
            </div>
            <div class="col-md-1" id="size">
                <h5>Size</h5>
            </div>
            <div class="col-md-2" id="price">
                <h5>Price</h5>
            </div>
        </div>
        <h5 id="total">Total :</h5>
    </div>
        <div class="col-md-1" id="rm">

        </div>
    <div class="col-md-5 mt-4">
        <h5>Messages</h5>
        <textarea name="message" id="message" cols="40" rows="5"></textarea>
        <div class="ml-auto m-4">
        <!-- 改为type="button"，避免默认提交行为 -->
        <button type="button" class="btn-success" onclick="order()">submit</button>
            </div>
    </div>
    </div>
</div>

<script src="{% static 'food/js/cart.js' %}"></script>

{% endblock %}

额外说明 #

• 确保URLconf中给order视图设置了name属性，比如：

  path('order/', views.order, name='order')
  

• 后端返回JsonResponse是AJAX请求的标准做法，前端可以根据返回的JSON数据做进一步处理。

内容的提问来源于stack exchange，提问作者python fullstack