Javascript 无需重定向或重新加载动态用户输入_Javascript_Python_Html_Flask_Server

Javascript 无需重定向或重新加载动态用户输入

javascript python html flask server

Javascript 无需重定向或重新加载动态用户输入,javascript,python,html,flask,server,Javascript,Python,Html,Flask,Server,我想将用户输入设置为同一页面上的变量，而无需重新加载。这可能吗我用这个简单的例子来解释我的问题。页面每秒钟动态计数一次。用户应该输入一个新的乘数，例如，如果他输入3，页面应该每秒添加3，等等。这应该是动态的，页面不应该重新加载或重定向下面是我的示例的html文件： <!doctype html> <html> <head> <title>jQuery Example</title> <

我想将用户输入设置为同一页面上的变量，而无需重新加载。这可能吗

我用这个简单的例子来解释我的问题。页面每秒钟动态计数一次。用户应该输入一个新的乘数，例如，如果他输入3，页面应该每秒添加3，等等。这应该是动态的，页面不应该重新加载或重定向

下面是我的示例的html文件：

<!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 }};
        </script>
        <script type="text/javascript">
            var intervalID = setInterval(update_values,1000);

            function update_values() {
                $.getJSON($SCRIPT_ROOT + '/_stuff',

                function(data) {
                    $('#result').text(data.result);
                    console.log(data)
                });
            };
        </script>
    </head>
    <body onload="update_values();">
        <span id="result"></span>
        <script>
            document.getElementById("result").innerHTML;
        </script>

        <form method="POST">
            <input name="multiplier" value="1">
            <input type="submit" value="Set multiplier">
        </form>
    </body>
</html>

from flask import Flask, jsonify, render_template, request
import webbrowser
import time

a = 0
app = Flask(__name__)

@app.route('/_stuff', methods = ['GET'])
def stuff():
    global a
    a = a + 1
    return jsonify(result=a)

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

if __name__ == '__main__':   
    app.run()

通过使用POST而不是GET将乘数发布到Web服务器

<!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 }};
        </script>
        <script type="text/javascript">
            var intervalID = setInterval(update_values,1000);

            function update_values() {

                $.ajax({
                    type: "POST",
                    url: $SCRIPT_ROOT + '/_stuff',
                    data: $('#myform').serialize(),
                    success: function(data)
                    {
                        $('#result').text(data);
                        console.log(data);
                    }
                });


            };
        </script>
    </head>
    <body onload="update_values();">
        <span id="result"></span>
        <script>
            document.getElementById("result").innerHTML;
        </script>

        <form method="POST" id="myform">
            <input name="multiplier" value="1">
            <input type="submit" value="Set multiplier">
        </form>
    </body>
</html>

烧瓶IO对此很有用。这是插座IO和烧瓶的组合。谢谢烧瓶IO为我做的把戏。本教程帮助很大：

from flask import Flask, jsonify, render_template, request
import webbrowser
import time

a = 0
app = Flask(__name__)

@app.route('/_stuff', methods = ['POST'])
def stuff():
    global a

    multiplier = request.form.get('multiplier')
    a = a + multiplier

    return jsonify(result=a)

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

if __name__ == '__main__':   
    app.run()