My python/flask web page accepts user input and returns it back to the user without reloading the page. Instead of using a POST request, I have implemented Ajax/JavaScript to handle user input, process it through flask in python, and display the result to the user.
While I am able to successfully process user input in python, I am facing difficulties updating the web page with the returned information.
I currently have functioning code that utilizes a POST request, but for my project, I prefer to avoid page reloads and simply update the content on the page.
*.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>