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

我有一个表单，用户可以在提交表单时输入一些文本。 返回该文本，并使用该文本的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

或者干脆

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

---

这样做：

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

---

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

当然可以。你到底有什么问题？这是一个相当简单的Ajax，可以用类似jQuery的东西很快实现。主要问题是显示图像。每次用户单击提交时。它会重新加载页面，然后我必须手动单击#tab4以查看生成的图像。我不希望页面刷新。当然，这就是为什么需要Ajax。关于如何实现这一点，有很多文档。不幸的是，我没有Ajax方面的经验。

<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">
        </span>
        <a href="javascript:void();" id="cal">calculate server side</a>
    </form>

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