Return back user input after button click without page reload, python flask

Question

I have a python/flask web page where after taking user input it returns it back to the user on the page, I don't want for the page to reload so instead of a POST request, I'm using Ajax/JavaScript to take in user input, allow python to process the data through flask and sent it back to the user.

I'm able to take user input, allow python to process it but I'm unable to update the web page to actually return what the user has typed.

I have working code where I use a POST request but for my project I rather the page did not reload and instead just update with the returned information.

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

How do I get the user input to actually show up on the page, after they click the button. — primitiveProgrammer, Nov 04 '20 at 21:05

score 1 · Accepted Answer · answered Nov 04 '20 at 21:38

Your code should look like this:

*.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)

Return back user input after button click without page reload, python flask

1 Answers1