API call results on same page using Flask

Question

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!

Answer 1

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

Answer 2

Go on YouTube and search "flask forms". Thank me later

Answer 3

I can't seem to find a similar example.