时间戳

首页 > 解决方案 > 单击按钮后返回用户输入而不重新加载页面，python烧瓶

javascript - 单击按钮后返回用户输入而不重新加载页面，python烧瓶

问题描述

我有一个 python/flask 网页，在获取用户输入后，它会将其返回给页面上的用户，我不希望页面重新加载，所以我使用 Ajax/JavaScript 来代替 POST 请求在用户输入中，允许python通过flask处理数据并发回给用户。

我能够接受用户输入，允许 python 处理它，但我无法更新网页以实际返回用户输入的内容。

我有使用 POST 请求的工作代码，但对于我的项目，我宁愿页面没有重新加载，而只是使用返回的信息进行更新。

*.py

@app.route('/t')
def pre():
    tx = request.args.get('aa')
    print('input',tx)
    return render_template('test.html',tx=tx)

*.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type=text/javascript>
    $(function() {
      $('a#cal').bind('click', function() {
        $.getJSON('/t', {
          aa: $('input[name="text"]').val(),
        }, function(data) {
          $('#result').html('<img src="data:image/png;base64,' + data.result + '" />');
          });
        return false;
      });
    });
  </script>
  <form>
    <input type="text" size="5" name="text">
     <span id="result">
         <p>For the love of god: {{tx}}</p>
        </span>
        <a href="javascript:void();" id="cal">calculate server side</a>
    </form>

标签： javascriptpythonjqueryajaxflask

解决方案

您的代码应如下所示：

*.py

from flask import render_template, jsonify

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


@app.route('/t')
def pre():
    tx = request.args.get('aa')
    print('input',tx)
    data = {"result": tx}
    return jsonify(data)

推荐阅读