Flask+jQuery实现表单无刷新重提交时出现NoneType错误如何解决？

问题根因 #

你遇到的TypeError: int() argument must be a string, a bytes-like object or a number, not 'NoneType'报错，核心原因是点击重掷按钮时，resjuego视图拿到的pool、magnitud参数为空，没有拿到第一次提交的骰子数量等配置数据，导致类型转换失败。
你现有代码的几个核心逻辑错误：

• 表单元素ID和Ajax选择器不匹配，juego页面绑定的表单提交Ajax根本拿不到输入值，而且你加了event.preventDefault()会阻止正常表单跳转，你之前能正常跳转完全是因为JS选择器报错导致这段代码未生效
• 没有持久化存储用户第一次提交的配置参数，页面跳转到resjuego后，原有表单数据已经丢失，重掷时自然拿不到参数
• 重掷按钮的逻辑完全错误，仅发送了空请求到无用的/back_retirada接口，没有触发重新掷骰子的逻辑，也没有传递参数

修复方案 #

1. 配置Flask Session存储用户参数

首先在Flask启动文件中配置SECRET_KEY，用来加密Session数据：

app.secret_key = '自定义任意随机字符串作为密钥'

2. 改造resjuego视图，支持从Session拿参数

修改resjuego视图逻辑，第一次表单提交时把参数存入Session，重掷时直接从Session读取参数复用：

from flask import session, redirect, url_for

@app.route('/resjuego', methods=['GET','POST'])
def resjuego():
    form = CumuloForm()
    signo = None
    pool = None
    magnitud = None
    # POST请求为第一次提交表单，读取表单参数存入Session
    if request.method == 'POST':
        signo = request.form.get('signo')
        pool = request.form.get('pool', type = int)
        magnitud = request.form.get('magnitud', type = int)
        session['signo'] = signo
        session['pool'] = pool
        session['magnitud'] = magnitud
    # GET请求为重掷，直接从Session读取已保存的参数
    else:
        signo = session.get('signo')
        pool = session.get('pool')
        magnitud = session.get('magnitud')
    # 校验参数合法性，参数缺失跳回表单页
    if not all([signo, pool, magnitud]):
        return redirect(url_for('juego'))
    
    # 以下为原有掷骰子逻辑，保持不变
    x = pool
    m = magnitud
    i=0
    roll=Dado.signar(x)
    res=roll
    y=rnd.randint(1,6)
    entropia=Dado.signar(y)
    thislist=[]
    thislist2=[]
    for i in range(x):
        thislist.append(Aspecto.aspectario(signo, res[0+i]))
        zumbi = thislist
    for i in range(y):
        thislist2.append(Aspecto.aspectario(signo, entropia[0+i]))
        zumbi2 = thislist2
    totalasp=zumbi+zumbi2
    conj = 2*(zumbi.count("conjunción"))
    semsex = 0*(zumbi.count("semisextil"))
    sext = 1*(zumbi.count("sextil"))
    cuad = -1*(zumbi.count("cuadratura"))
    trig = 1*(zumbi.count("trígono"))
    quinc = 0*(zumbi.count("quincuncio"))
    opos = -2*(zumbi.count("oposición"))

    conj2 = 2*(zumbi2.count("conjunción"))
    semsex2 = 0*(zumbi2.count("semisextil"))
    sext2 = 1*(zumbi2.count("sextil"))
    cuad2 = -1*(zumbi2.count("cuadratura"))
    trig2 = 1*(zumbi2.count("trígono"))
    quinc2 = 0*(zumbi2.count("quincuncio"))
    opos2 = -2*(zumbi2.count("oposición"))

    éxitos = conj + semsex + sext + cuad + trig + quinc + opos
    éxitosent= conj2 + semsex2 + sext2 + cuad2 + trig2 + quinc2 + opos2
    if éxitos + m <=0:
        rest="fallo"
    if éxitos >=0:
        rest="éxito"
    if éxitos <=0 and éxitos + m >=0:
        rest="adverso"
    des_exitos = descriptorc(rest)

    T1 = struli(zumbi)
    T2 = struli(zumbi2)
    res=struli(res)
    entropia=struli(entropia)

    return render_template('resjuego.html', title='Caosmos', lanzarcum=res, signo = signo, entropia=entropia, aspecto=T1, aspecto2=T2, éxitos=éxitos, éxitosent = éxitosent, des_exitos=des_exitos)

3. 简化重掷逻辑，删除无用代码

• 你之前写的/back_retirada接口和juego页面的无用Ajax代码可以直接删除
• 改造resjuego页面的重掷按钮代码，点击直接刷新页面复用Session参数重新掷骰子：

<div class='text-center'>
    <button id="re_tirada">¡Lanza otra vez!</button>
</div>
<script>
$(function() {
    $("#re_tirada").click(function() {
        window.location.reload();
    })
})
</script>

如果需要实现完全无刷新的效果，可以改造resjuego视图支持返回JSON格式的掷骰结果，点击重掷时发送Ajax请求拉取新结果后局部替换页面元素即可。

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