Flask实现无刷新动态设置用户输入为变量的技术问询

你的需求完全可以通过前端AJAX异步请求 + 后端状态维护来实现，不用刷新页面就能实时更新计数的递增倍数。我帮你调整了示例代码，实现这个功能：

后端Flask代码修改 #

首先我们需要在后端维护一个乘数变量，并且新增一个接口用来接收前端发来的乘数更新请求：

from flask import Flask, jsonify, render_template, request

a = 0
multiplier = 1  # 新增全局乘数变量，初始值为1
app = Flask(__name__)

@app.route('/_stuff', methods = ['GET'])
def stuff():
    global a, multiplier
    a += multiplier  # 按当前乘数递增计数
    return jsonify(result=a)

@app.route('/_set_multiplier', methods=['POST'])
def set_multiplier():
    global multiplier
    # 获取前端传来的乘数，转成整数并处理异常输入
    new_multiplier = request.form.get('multiplier', 1, type=int)
    multiplier = max(new_multiplier, 1)  # 确保乘数至少为1，避免无效值
    return jsonify(success=True)

@app.route('/')
def index():
    return render_template('template.html')

if __name__ == '__main__':
    app.run(debug=True)  # 开启debug模式方便调试

前端HTML/JS代码修改 #

接下来修改前端，阻止表单默认的刷新提交行为，改用AJAX异步发送乘数到后端：

<!doctype html>
<html>
<head>
<title>jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
 var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
 var intervalID = setInterval(update_values,1000);

 function update_values() {
     $.getJSON($SCRIPT_ROOT + '/_stuff', function(data) {
         $('#result').text(data.result);
         console.log(data)
     });
 };

 // 页面加载完成后绑定表单提交事件
 $(function() {
     $('#multiplier-form').submit(function(e) {
         // 阻止表单默认的刷新提交行为
         e.preventDefault();
         // 获取输入框的乘数
         var multiplier_val = $('input[name="multiplier"]').val();
         // 异步发送POST请求到后端更新乘数
         $.post($SCRIPT_ROOT + '/_set_multiplier', {multiplier: multiplier_val}, function(data) {
             console.log('乘数已更新为:', multiplier_val);
         });
     });
 });
</script>
</head>
<body onload="update_values();">
<span id="result"></span>
<!-- 给表单添加id，方便绑定事件 -->
<form id="multiplier-form" method="POST">
    <input name="multiplier" value="1" type="number" min="1"> <!-- 优化输入体验，限制为正整数 -->
    <input type="submit" value="Set multiplier">
</form>
</body>
</html>

关键改动说明 #

• 后端：新增/_set_multiplier接口接收POST请求，更新全局的multiplier变量；修改/_stuff接口，让计数按当前乘数递增。
• 前端：
  • 给表单添加id，用jQuery绑定submit事件，通过e.preventDefault()阻止默认刷新行为。
  • 用$.post异步发送乘数到后端，实现无刷新更新。
  • 给输入框添加type="number"和min="1"，限制输入为正整数，提升用户体验。

现在运行代码，输入乘数点击按钮，页面计数的增量会立刻变成你设置的数值，全程不需要刷新页面~

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