动态数据更新，无需刷新或重新加载

Question

我有一个表单，用户可以在里面输入一些文字。当用户提交这个表单后，输入的文字会被返回，并且通过PIL模块生成一张图片。

@app.route('/enter')
def index():
    img = Image.new('RGB',(1000,1000))
    txt=request.form['text']
    font=ImageFont.truetype("ariel.ttf",30)
    draw  =  ImageDraw.Draw ( img )
    draw.text ( ( 0 , 0), txt, font=font, fill="#000000" )
    io = StringIO()
    img.save(io, format='png')
    data = io.getvalue().encode('base64')
    return render_template('index.html',data=data)

这张动态生成的图片会被发送到网页上显示出来。

<img  src="data:image/png;base64,{{data}}" > // html shows the image

不过，这个过程需要重新加载或刷新页面。有没有办法使用JavaScript或JSON来获取表单数据，并在不刷新页面的情况下显示这张图片呢？另外，我在页面上使用了标签来展示内容，而这张根据用户反馈动态更新的图片是在#tab4里面。我该如何在Flask中设置URL呢：

@app.route('/enter#tab4', methods=[ 'POST'])

或者简单来说

@app.route('/enter', methods=[ 'POST'])

Answer 1

你可以这样做：

<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>

然后在你的html里：

 <form>
    <input type="text" size="5" name="text">
     <span id="result">
        </span>
        <a href="javascript:void();" id="cal">calculate server side</a>
    </form>

只需要在你的Python代码里写一个函数就可以了。

@app.route('/t')
def pre():
    tx = request.args.get('aa', 0, type=str)
    //call function to perform some function on tx and then convert it to base64
    return jsonify(result=data)

这样就能满足你的需求了，不需要重新加载或刷新页面。