Ajax is a methodology to communicate with a server asynchronously without having to reload the page. This methodology is instrumental in sending new data to update the webpage, but you don't want to refresh to get new content, which can be an issue if you're using the Flask framework.
In Python, you have an array of data you want to send to the front end. Using Flask, you can use jsonify to serialize the data into JSON format, which can be used as a response type. In Flask, your response types can render pages or redirect to a webpage or a route specified in the app, but in this case, we only want to return a JSON object.
In the example below, "thepackage" is the name the data will be associated with. To add more variables to return, expand the number of elements inside.
Getting data from the front end
In a script or .JS file:
Using AJAX, you can formulate a get request by specifying the target url, and on success, the data from your python script will be wrapped in a JSON object.
Sending data to backend and getting a response
Like a normal CURL request, you can send data. Modify your AJAX script by adding a data parameter.
Back in your python, you can retrieve the arument using Flask's request function.
Using endpoints to send data
Alternatively, you can send data to your backend using endpoints. The following are two examples of that working.
These are all things I wish I knew right off the bat when I first started building web apps.