编辑：

Question

在Flask网站上有一个关于如何使用AJAX的教程，这个例子显示了两个数字的总和。

这是python应用程序来自flask导入Flask，render_template，request，jsonify

# Initialize the Flask application
app = Flask(__name__)


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

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

if __name__ == '__main__':
    app.run(
        host="0.0.0.0",
        port=int("80"),
        debug=True
    )

这是HTML文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
          rel="stylesheet">
  <script type=text/javascript>
    $(function() {
      $('a#calculate').bind('click', function() {
        $.getJSON('/_add_numbers', {
          a: $('input[name="a"]').val(),
          b: $('input[name="b"]').val()
        }, function(data) {
          $("#result").text(data.result);
        });
        return false;
      });
    });
  </script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">How To Manage JSON Requests</h3>
      </div>
      <hr/>
      <div>
      <p>
    <input type="text" size="5" name="a"> +
    <input type="text" size="5" name="b"> =
    <span id="result">?</span>
    <p><a href="javascript:void();" id="calculate">calculate server side</a>
      </form>
      </div>
    </div>
  </body>
</html>

我看到，通过这个示例，每次点击链接时都可以向服务器发送请求，但是，我想知道是否可以跳过此步骤并获取请求加班用户输入的文字发生变化。

Answer 1

是。浪费资源，但你可以改变

$('a#calculate').bind('click', function() {到

$('input[name="a"]').change(function() {

对输入b

执行相同操作

编辑：

并且，测试AS YOU TYPE：

$('input[name="a"]').on('input',function(e){

或：

$('input[name="a"]').keyup(function(e){

填写表单时AJAX + Flask更新服务器请求

1 个答案:

编辑：