Flask+Ajax登录验证通过后render_template不渲染页面如何解决？

问题根因 #

你使用Ajax异步提交登录请求时，浏览器不会主动对后端返回的页面内容做整页渲染或跳转，后端render_template返回的HTML内容只会作为响应数据传递给Ajax的success回调，你没有在前端处理该响应，因此页面没有任何变化。

修复方案 #

方案1：使用原生表单提交（改动最小） #

直接移除前端自己绑定的submit事件监听代码，给表单标签添加原生提交属性即可：

<form id="login-form" action="/login" method="POST">
<!-- 原有表单内容 -->
</form>

后端代码无需改动，验证通过后返回的render_template会自动触发整页渲染为首页。

方案2：保留Ajax提交（前后端配套修改） #

后端调整

将登录接口的POST请求响应改为JSON格式，返回登录状态和跳转地址，不要直接返回HTML：

from flask import jsonify, url_for

@app.route('/login' , methods=["POST","GET"])
def page_login() :
    # GET请求返回登录页
    if request.method == 'GET':
        return render_template('/login.html')
    
    log_screenprint('Got Request From GUI User to login With Cred.')
    # 提前从请求中取参数，避免循环内重复调用
    username = request.form.get('username')
    password = request.form.get('password')
    sessionId = request.form.get('session')

    for key,value in securityFile.items() :
        dbUser = securityFile[key]['username']
        dbpass = securityFile[key]['defaultpass']
        if dbUser == username and dbpass == password :
            socketio.emit('userDb' , json.dumps(securityFile[key]) , session = sessionId)
            # 返回成功状态和首页跳转地址，提前单独配置首页路由
            return jsonify({
                "status": "success",
                "redirect_url": url_for('home_page')
            })
    # 验证失败返回错误状态
    return jsonify({
        "status": "fail",
        "msg": "用户名或密码错误"
    })

# 新增单独的首页路由
@app.route('/home')
def home_page():
    return render_template('/index.html' ,  title= 'Home Page')

前端调整

在Ajax的success回调中判断登录状态，主动触发页面跳转：

$('#login-form').submit(function (e) {
  e.preventDefault();
  var username = document.querySelector('.login-username').value
  var password = document.querySelector('.login-password').value
    $.ajax({
      url: '/login',
      data: {
              username: username,
              password: password,
              session : (socket.id),
          },
        type: 'POST',
        dataType: 'json',
        success: function (res) {
          if(res.status === 'success'){
            // 登录成功主动跳转
            window.location.href = res.redirect_url;
          }else{
            alert(res.msg);
          }
        },
        error: function (error) {
          console.log(error);
        }
      });
  });

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