Django中通过AJAX从JS调用Python函数实现无刷新显示车型续航

你的代码逻辑方向是对的，但几个关键细节没处理到位，导致功能没生效。咱们一步步来排查修复：

1. 修复Django视图函数（ajax_handler.py） #

你的get_car_data函数只是返回了数值，但Django视图必须返回HttpResponse对象，否则前端无法接收正确响应。同时要处理请求对象，不能直接接收参数：

from django.http import HttpResponse
import pandas as pd

def get_car_data(request):
    # 先校验请求方法
    if request.method == 'POST':
        car_model = request.POST.get('car_model')
        cars_frame = pd.read_csv("C:/Users/David/Desktop/cars.csv", sep=';')
        frame2 = cars_frame.set_index('Car', drop=True)
        
        # 增加车型存在性判断，避免报错
        if car_model in frame2.index:
            car_range = frame2.loc[car_model]['Range']
            return HttpResponse(str(car_range))  # 转成字符串返回给前端
        else:
            return HttpResponse("未找到该车型数据")
    # 非POST请求返回提示
    return HttpResponse("无效请求方式")

2. 处理Django的CSRF令牌验证 #

Django默认会拦截不带CSRF令牌的POST请求，所以AJAX请求必须带上令牌。修改main.js代码：

function display(value){
    // 获取页面中的CSRF令牌
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    $.ajax({
        type: "POST",
        url: "/get_car_data/",
        data: { car_model: value },
        headers: { 'X-CSRFToken': csrftoken }  // 加入CSRF请求头
    }).done(function(range) {
        console.log("返回的续航数据：", range); // 先在控制台确认返回值
        $("#range").html(range);
    }).fail(function(xhr, status, error) {
        // 增加错误处理，方便排查问题
        console.error("请求失败原因：", error);
        alert("获取续航数据失败，请查看控制台日志");
    });
}

另外要确保你的HTML页面里存在CSRF令牌，通常Django模板会自动生成，也可以手动在页面中添加：

{% csrf_token %}

3. 确认前端显示元素存在 #

你用$("#range").html(range)更新内容，必须保证页面上有一个id为range的元素，比如：

<p>选中车型续航：<span id="range">请选择车型</span></p>

4. 优化URL配置（urls.py） #

如果是Django 2.0+版本，推荐使用path（url也兼容），同时给URL结尾加$避免匹配错误路径：

from django.conf.urls import url
import ajax_handler

urlpatterns = [
    url(r'^get_car_data/$', ajax_handler.get_car_data, name='get_car_data'),
]

5. 调试建议 #

• 打开浏览器开发者工具（F12），切换到Network标签，选择车型时查看get_car_data请求的状态码和响应内容。
• 查看Console标签，检查是否有元素找不到、请求失败等报错信息。

按照以上步骤修改后，应该就能实现无刷新显示车型续航的功能了。

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