Django中jQuery登录点击事件响应正常但视图错误提示不渲染问题

核心问题：你通过AJAX发起登录请求后，Django返回的内容仅存在于AJAX回调参数中，你没有手动将错误信息更新到当前页面DOM，浏览器不会自动刷新页面内容，因此看不到提示变化。同时现有代码还存在几处逻辑缺陷，统一修复如下：

1. 修复Django视图逻辑 #

原有视图存在登录成功重定向未生效、认证失败无错误返回的问题，同时修改为针对AJAX请求返回JSON格式响应，避免返回整个页面冗余内容：

from django.http import JsonResponse
from django.shortcuts import redirect, render
from django.contrib.auth import authenticate, login

def logn(req):
    if req.user.is_authenticated:
        # 区分AJAX请求和普通请求的响应逻辑
        if req.headers.get('x-requested-with') == 'XMLHttpRequest':
            return JsonResponse({'status': 'success', 'redirect_url': '/home/'})
        return redirect('home')
    
    if req.method == 'POST':
        usrname = req.POST.get('lusername', '')
        psswd = req.POST.get('lpass', '')
        error_msg = None

        if len(psswd.strip()) == 0:
            error_msg = '密码不能为空'
        else:
            usr = authenticate(req, username=usrname, password=psswd)
            if usr is None:
                error_msg = '用户名或密码错误'
        
        # 错误响应逻辑
        if error_msg:
            if req.headers.get('x-requested-with') == 'XMLHttpRequest':
                return JsonResponse({'status': 'error', 'msg': error_msg})
            return render(req, 'base.html', {'error_msg': error_msg})
        
        # 登录成功逻辑
        login(req, usr)
        if req.headers.get('x-requested-with') == 'XMLHttpRequest':
            return JsonResponse({'status': 'success', 'redirect_url': '/home/'})
        return redirect('home')

2. 修改HTML错误提示节点 #

删掉重复的错误提示代码，给唯一的提示节点加固定ID方便jQuery定位，兼容原有非AJAX提交的渲染逻辑：

<!-- 替换原有两处{% if error_msg %}的错误提示代码，只保留这一处 -->
{% if error_msg %}
<p id="login_error_tip" class='red-text'>{{ error_msg }}</p>
{% else %}
<p id="login_error_tip" class='red-text' style="display: none;"></p>
{% endif %}

额外优化建议：将密码输入框的type="text"改为type="password"，避免输入时明文泄露。

3. 修改jQuery AJAX回调逻辑 #

新增响应处理逻辑，根据返回状态展示错误或跳转页面：

$('#lbtn').click(function(){
    // 先清空之前的错误提示
    $('#login_error_tip').hide().text('');
    let lusername = $('input[name=lusername]').val();   
    let lpass = $('input[name=lpassword]').val();
    $.ajax({
        type: 'POST',
        url: '/login/',
        headers :{
            'X-CSRFToken': getcsrfToken(),
        },
        data: {
            lusername: lusername,
            lpass: lpass,
        },
        success: (data) => {
            if(data.status === 'error'){
                // 展示错误信息
                $('#login_error_tip').text(data.msg).show();
            }else if(data.status === 'success'){
                // 登录成功清空输入并跳转首页
                $('input[name=lusername]').val('');
                $('input[name=lpassword]').val(''); 
                window.location.href = data.redirect_url;
            }
        },
        error: () => {
            $('#login_error_tip').text('请求异常，请稍后重试').show();
        }
    })  
})

4. 多视图共享base.html上下文优化 #

如果需要在所有视图中给base.html传递公共参数，可以配置Django上下文处理器，避免每个视图手动传参：

1. 新建context_processors.py文件，定义公共参数返回逻辑
2. 在settings.py的TEMPLATES.OPTIONS.context_processors中添加自定义的处理器即可

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