javascript - Dynamic data update, no refresh or reload required -

javascript - Dynamic data update, no refresh or reload required -

i have form lets user come in text , when user submit form. text gets returned , image generated using pil module of text.

@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') info = io.getvalue().encode('base64') homecoming render_template('index.html',data=data)

this dynamic image forwarded webpage shown

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

but requires reload or refresh of page. possible utilize javascript or json form info , render image without refreshing page. using tabs display content of page , img dynamically updated per user response contained in #tab4 how set url in flask:

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

or simply

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

do this:

<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 + '" />'); }); homecoming false; }); }); </script>

and in html:

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

just create function in python code

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

this should serve purpose. there no reloading or refresh required.

javascript python html ajax flask