Django AJAX请求中模板无法获取counter变量问题

你遇到的核心问题是：页面初始加载时，视图没有收到quantity参数，导致模板渲染的counter为None；而点击按钮触发的AJAX请求虽然能获取到正确的counter，但你并没有将返回的结果更新到当前页面上，所以页面显示的始终是初始的None。

这里提供两种可行的解决思路：

思路1：通过AJAX更新页面内容 #

步骤1：修改HTML模板，给counter添加容器 #

给模板中的{{counter}}包裹一个可定位的容器，方便后续更新：

<body>
    <div id="counter-container">{{counter}}</div>
    <button class="btn neg" name="neg-btn">-</button>
    <button class="btn add" name="add-btn">add to box</button>
    <button class="btn pos" id="test" name="pos-btn">+</button>
</body>

步骤2：完善AJAX的success回调 #

在AJAX请求成功后，将视图返回的页面内容中提取counter值，更新到页面容器里：

// 先初始化counter变量
let counter = 0;

$(".pos").click(function(){
    counter = counter + 1;
    $(".add").html('add counter ' + counter);
    $.ajax({ 
        url: 'page',
        type: 'get',
        data: {
            quantity: counter
        },
        success:function(response){
            console.log(response);
            // 从返回的HTML中提取counter内容并更新页面
            const newCounter = $(response).find("#counter-container").text();
            $("#counter-container").text(newCounter);
        }
    });
});

思路2：返回JSON数据（更高效） #

这种方式不需要视图渲染整个页面，只返回需要的数据，减少资源消耗。

步骤1：修改视图函数，返回JSON #

判断请求是否为AJAX请求，返回对应的JSON数据：

from django.http import JsonResponse

def page(request):
    counter = request.GET.get('quantity')
    print(counter)
    # 识别AJAX请求
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        return JsonResponse({'counter': counter})
    # 非AJAX请求返回页面
    return render(request, 'page.html', {'counter': counter})

步骤2：修改AJAX逻辑，直接用JSON数据更新页面 #

let counter = 0;

$(".pos").click(function(){
    counter = counter + 1;
    $(".add").html('add counter ' + counter);
    $.ajax({ 
        url: 'page',
        type: 'get',
        data: {
            quantity: counter
        },
        success:function(response){
            console.log(response);
            // 直接用返回的JSON数据更新页面
            $("#counter-container").text(response.counter);
        }
    });
});

步骤3：HTML模板同样添加容器 #

和思路1的模板修改一致，给{{counter}}加容器：

<body>
    <div id="counter-container">{{counter}}</div>
    <button class="btn neg" name="neg-btn">-</button>
    <button class="btn add" name="add-btn">add to box</button>
    <button class="btn pos" id="test" name="pos-btn">+</button>
</body>

• 确保JS中的counter变量有初始值（比如let counter = 0;），否则第一次点击会出现NaN的情况。
• 初始加载页面时，如果希望counter显示0而非None，可以在视图中设置默认值：counter = request.GET.get('quantity', 0)

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