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

Posted 2023-02-23

【中文标题】动态数据更新，无需刷新或重新加载

【英文标题】：Dynamic data update, no refresh or reload required

【发布时间】：2014-08-08 11:23:33

【问题描述】：

我有一个表单，可以让用户输入一些文本，并在用户提交表单时。 该文本被返回并使用该文本的 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 来获取表单数据并渲染图像而不刷新页面。 我也使用标签来显示页面的内容，这个根据用户响应动态更新的img包含在#tab4中 我如何在烧瓶中设置网址：

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

或者干脆

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

【问题讨论】：

当然，有可能。你到底遇到了什么问题？这是一个相当简单的 Ajax，可以使用 jQuery 之类的东西快速实现。

主要问题是显示图像。每次用户点击提交。它重新加载页面，然后我必须手动单击#tab4 才能查看生成的图像。我不想刷新页面。

当然，这就是您需要 Ajax 的原因。有很多关于如何实现这一点的文档。

很遗憾我没有使用 Ajax 的经验。

【参考方案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)

这应该符合您的目的。无需重新加载或刷新。