Flask返回str(0)/str(2)时Ajax请求触发白屏显示数值问题

返回0/2时整页白屏只显示数字，核心是两个Ajax入门高频踩坑点：

• 表单提交事件没有阻止浏览器默认同步提交逻辑，你写的Ajax回调根本没执行，浏览器直接把/signin接口返回的纯文本当成新页面渲染了，自然不会有JS交互效果。
• 少数场景是Flask返回值的响应头配置不对、Ajax接收返回值的类型不匹配，导致JS回调执行报错中断，但90%以上的情况都是第一个原因。

1. 前端提交事件第一行加默认行为阻止 #

不管是给<form>标签绑定submit事件，还是给登录按钮绑定click事件，回调第一行必须加阻止默认提交的代码，参考正确实现：

// 绑定表单提交事件，不要只绑按钮点击，否则用户按回车提交还是会出问题
document.querySelector('#loginForm').addEventListener('submit', function(e) {
  // 核心代码：阻止浏览器默认跳转到接口地址的同步提交行为
  e.preventDefault();

  // 读取表单参数
  const phone = document.querySelector('#phoneInput').value.trim();
  const password = document.querySelector('#pwdInput').value.trim();

  // Ajax请求逻辑，这里用原生fetch举例，用jQuery/XMLHttpRequest逻辑一致
  fetch('/signin', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    // 参数做编码避免特殊字符异常
    body: `phone=${encodeURIComponent(phone)}&password=${encodeURIComponent(password)}`
  })
  .then(response => response.text()) // 后端返回纯字符串，用text()接收，不要用json()解析
  .then(result => {
    switch(result) {
      case '0':
        // 隐藏手机号密码区域，显示OTP输入栏
        document.querySelector('#accountPwdBlock').style.display = 'none';
        document.querySelector('#otpBlock').style.display = 'block';
        break;
      case '2':
        // 显示凭证错误提示
        document.querySelector('#errorTip').textContent = '手机号或密码错误，请重试';
        document.querySelector('#errorTip').style.display = 'block';
        break;
      case 'trusted':
        // 可信设备直接跳转dashboard，跳转逻辑放前端做
        window.location.href = '/dashboard';
        break;
    }
  })
  .catch(err => {
    console.error('请求异常:', err);
  })
})

如果用jQuery写Ajax，同样要在事件回调第一行写e.preventDefault()，不要遗漏。

2. 后端Flask路由适配Ajax请求逻辑 #

不要在Ajax接口里直接返回模板、做服务端跳转，这类操作对异步请求无效，只需要返回状态标识即可，参考写法：

from flask import request, make_response

@app.route('/signin', methods=['POST'])
def signin():
    phone = request.form.get('phone', '')
    password = request.form.get('password', '')
    
    # 替换成你自己的账号密码校验逻辑
    user = check_account_valid(phone, password)
    if not user:
        # 凭证错误返回'2'，明确指定响应类型为纯文本
        resp = make_response('2')
        resp.headers['Content-Type'] = 'text/plain'
        return resp
    
    # 替换成你自己的可信设备校验逻辑
    if check_device_trusted(request, user):
        resp = make_response('trusted')
        resp.headers['Content-Type'] = 'text/plain'
        return resp
    else:
        resp = make_response('0')
        resp.headers['Content-Type'] = 'text/plain'
        return resp

注意：如果在Ajax接口里直接写return redirect('/dashboard')或者return render_template('index.html')，浏览器不会执行整页跳转/模板渲染，只会把跳转后的页面内容/模板代码当成接口返回值传给JS，不会达到预期效果。

• 检查<form>标签是否写了action="/signin"属性，如果写了要么删除，要么必须在submit事件里阻止默认行为，否则浏览器一定会直接提交表单跳转到接口地址。
• 检查Ajax的数据接收类型配置：后端返回纯文本时，fetch要用res.text()接收，jQuery要配置dataType: 'text'，不要强行用JSON解析，否则会抛错中断回调执行。
• 检查登录按钮的type属性，如果是type="submit"，优先给form绑定submit事件，不要只给按钮绑click事件，避免用户按回车键提交时触发默认跳转。

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