+ 1

API call results on same page using Flask

Hey guys! I managed to deploy a static page and run the script using Flask framework, but I have an issue that I can't seem to resolve, I'll be very grateful if you can help! I'd like to create a form and display the results of the api call in the same page and whitout reloading, I know I need to use ajax/js or jquery but to be frank I have no clue how to do that on Flask! App.py @app.route('/') def static_file(): return app.send_static_file('index.html') @app.route('/results/') def results(): headers = { 'X-ApiKey': 'xxxxxxxxxxxxxxxxxxxxx', } data = {'data': request.args.get('data')} results = requests.post('https://apiv2.indico.io/personality', headers=headers, data=data) return results.text HTML Form: <form action="/results"> <strong> Try It<br> <br> </strong><br> <input type="text" name="data"> <br><br> <input type="submit" value="Submit"> </form> Thank you so much!

11th Jun 2017, 12:45 PM
Youssef Selkani
Youssef Selkani - avatar
3 Answers
+ 4
You have to avoid the url value in the 'action' attribute of your <form> element, as at submit, this will automatically send a Http (web) request for a new page/document (with sending form data ): rather use XMLHttprequest (search on google for how it will be used -- too complex for been explained in a post) with JS script and run on submit of the form (there's many ways, using 'javascript:' pseudo protocol as header of the 'action' value, or using event listener 'onsubmit' on form or 'onclick' on submit button... ) Then, the returned document from the http request handled by the XMLHttpRequest object (AJAX) will be received by JS rather than loaded as a new page/document, and you can use it to modify dynamically your actual page ^^
20th Jun 2017, 6:01 AM
visph - avatar
+ 1
Go on YouTube and search "flask forms". Thank me later
16th Jun 2017, 3:53 PM
Romane Green
Romane Green - avatar
I can't seem to find a similar example.
19th Jun 2017, 10:52 AM
Youssef Selkani
Youssef Selkani - avatar