网站HP变量更新按钮前端footer首点不更新及跨页功能异常排查

问题描述 #

• 网站中更新hp变量的按钮后台逻辑正常，但JavaScript首次点击时无法更新footer区域的HP显示；后台变量每次点击都会正确更新，但footer的HP显示需在首次点击后才会同步更新。
• 切换至players页面执行place bounty（放置赏金）操作时，首次点击会触发footer的HP值减1（此为tip功能的逻辑），后续点击才会正确执行减10的赏金操作逻辑。

相关代码 #

app.py #

@app.route("/dealers", methods=["GET", "POST"])
@login_required
def dealers():
    if request.method == "POST":
        id = int(request.form['user_id'])

        #initialize rows with user data
        rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])

        # making sure user has enough hp
        if rows[0]["hp"] < 1:
            return jsonify({'success': False})
        
        # minus users hp and add dealers hp
        db.execute("UPDATE users SET hp = hp - 1, lucky = lucky + 1 WHERE id = ?", session["user_id"])
        db.execute("UPDATE users SET hp = hp + 1 WHERE id = ?", id)

        session["hp"] = rows[0]["hp"]
        hp = session["hp"]

        return jsonify({'success': True, 'hp': hp})
    else:
        return render_template("dealers.html")

@app.route("/players", methods=["GET", "POST"])
@login_required
def players():
    if request.method == "POST":
        id = int(request.form['user_id'])

        #initialize rows with user data
        rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])
        
        # minus users hp and add dealers hp
        db.execute("UPDATE users SET hp = hp - 10, lucky = lucky + 10 WHERE id = ?", session["user_id"])
        db.execute("UPDATE users SET bounty = bounty + 1 WHERE id = ?", id)

        session["hp"] = rows[0]["hp"]
        hp = session["hp"]

        return jsonify({'success': True, 'hp': hp})
    else:
        players = db.execute("SELECT * FROM users ORDER BY hp")
        # add OFFSET int for skipping first few users^
        
        return render_template("players.html", players=players)

script.js #

function tip(user_id) {
    $.ajax({
        type: 'POST',
        url: '/dealers',
        data: {'user_id': user_id},
        success: function(data) {
            if (data.success) {
                $("#dialog-message").dialog({
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-message").text("You have successfully tipped");
                setTimeout(function() {
                    $("#dialog-message").dialog("close");
                }, 4000); // close dialog after 5 seconds

                // update HP value in #value-container element
                if (data.hp !== undefined) {
                    $('#value-container').text("HP: " + data.hp);
                }
            } 
    });
}

function placeBounty(user_id) {
    $.ajax({
        type: 'POST',
        url: '/players',
        data: {'user_id': user_id},
        success: function(data) {
            if (data.success) {
                $("#dialog-message").dialog({
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-message").text("You have successfully placed a bounty!");
                setTimeout(function() {
                    $("#dialog-message").dialog("close");
                }, 4000); // close dialog after 5 seconds 
                $('#value-container').html("HP: " + data.hp);
            } 
}

layout.html #

//some code
<footer>
    <div id="value-container"> HP: {{ session["hp"] }} </div>
</footer>

问题分析 #

1. 首次点击footer HP不更新：后端更新数据库后，直接使用更新前的rows[0]["hp"]赋值给session["hp"]和返回的hp，导致前端拿到的是旧值。首次点击后前端显示旧值，第二次点击时后端查询到第一次更新后的数值，返回正确值后前端才同步更新。
2. place bounty首次执行tip逻辑：players页面的place bounty按钮大概率错误绑定了tip函数，首次点击触发/dealers接口（减1HP）；同时placeBounty函数存在语法缺失（未闭合}），引发事件绑定异常，后续才执行正确逻辑。

修复方案 #

后端修改（app.py） #

更新数据库后重新查询用户最新HP值，再赋值给session和返回：

# 在dealers函数的UPDATE语句后添加
rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])
session["hp"] = rows[0]["hp"]
hp = session["hp"]

# 在players函数的UPDATE语句后添加同样的查询代码
rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])
session["hp"] = rows[0]["hp"]
hp = session["hp"]

修改后的dealers函数示例：

@app.route("/dealers", methods=["GET", "POST"])
@login_required
def dealers():
    if request.method == "POST":
        id = int(request.form['user_id'])

        rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])

        if rows[0]["hp"] < 1:
            return jsonify({'success': False})
        
        db.execute("UPDATE users SET hp = hp - 1, lucky = lucky + 1 WHERE id = ?", session["user_id"])
        db.execute("UPDATE users SET hp = hp + 1 WHERE id = ?", id)

        # 重新查询最新用户数据
        rows = db.execute("SELECT * FROM users WHERE id = ?", session["user_id"])
        session["hp"] = rows[0]["hp"]
        hp = session["hp"]

        return jsonify({'success': True, 'hp': hp})
    else:
        return render_template("dealers.html")

前端修改 #

1. 修正事件绑定：确认players页面中放置赏金的按钮绑定placeBounty函数，例如onclick="placeBounty(user_id)"。
2. 补全函数语法：修复placeBounty函数的闭合问题：

function placeBounty(user_id) {
    $.ajax({
        type: 'POST',
        url: '/players',
        data: {'user_id': user_id},
        success: function(data) {
            if (data.success) {
                $("#dialog-message").dialog({
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-message").text("You have successfully placed a bounty!");
                setTimeout(function() {
                    $("#dialog-message").dialog("close");
                }, 4000); 
                $('#value-container').html("HP: " + data.hp);
            } 
        }
    });
}

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