LessonThis is a lesson restated in new words. Any figure in it is an example from the source, not this desk's record.
Ajax lets a page ask the server for a new fragment and swap that fragment into the current document. The lesson uses it so a random number, produced in Flask, changes about once a second without a browser reload. A POST route draws the number, renders a tiny template, and returns that template as JSON. A script on the home page calls the route on a one-second timer and replaces a div with the response.
Why it matters
A value passed through Jinja at page load is frozen until the next full request. That is acceptable for a name. It is a poor fit for a quote or any figure that moves. Restarting the Python process to draw a new number, which is what a fresh run of the script does, is impossible on a host that is supposed to stay up. The lesson mentions a long-running host such as a managed application platform only to make that point. The local fix is a second route the page can call while the first page stays open.
The idea in plain words
The home route still renders the main template. A second route, update decimal, accepts POST and assigns a new uniform draw between 0 and 1 to the random number. The page should not receive a second copy of the entire home document. It should receive just the piece that changed. The lesson puts that piece in its own file: a div whose id is random decimal, with a Jinja placeholder inside. The route renders that small file and wraps it with Flask's JSON helper so the browser callback can treat the body as data.
On the page, a function named in the lesson load new decimal issues a jQuery Ajax call. The URL is /update-decimal, the type is POST, and the data type is JSON. On success, jQuery finds the div with that id and replaces it with the HTML the server sent. A timer starts the function every 1,000 milliseconds. The visible effect is a new decimal about once a second, on a page that was not reloaded.
How to use it
Keep the home route and its template. Give the displayed value a div id. Add the POST route. Inside it, draw the new number with NumPy's uniform random, render the small template, pass the number into the placeholder, and return the JSON form of that render. The lesson's placeholder in the fragment is a separate name from the Python variable. It uses x in the fragment and passes the new draw as x.
In the home template, include the script that defines the Ajax function and the interval. The interval's delay is 1,000, so the call rate is one second. Confirm the URL string matches the route, including the leading slash, and that the route's methods list includes POST. Load the home page and watch the div. The lesson's check is simply that the digits change each second.
The same shell can return a larger fragment. The lesson says the small template could hold a table or an image. The random number is only the smallest payload that makes the timer obvious.
What usually goes wrong
Returning the full home template from the update route replaces the div with a nested copy of the whole page, or fights the surrounding document. The fragment file exists so the response is only the div. The id on that div and the id in the jQuery selector have to be the same, and the replacement has to put the id back, or the next tick will not find the target.
A GET route will reject the POST the script sends, and a missing JSON data type will hand the success function something it does not treat as HTML. The timer and the route are easy to point at different paths. The lesson's path is the update route it just defined.
The draw happens on the server, in the POST function, not in the browser. If the route returns a number computed once at import time, the div will refresh and show the same digits. The new random call has to sit inside the route that Ajax hits.
One second is the lesson's interval. A faster timer raises the request rate on the same process. The lesson does not tune that. It shows that a standing server can change one region of a page.
Questions people ask
What does the timer call?
Every 1,000 milliseconds it calls the JavaScript function that posts to the update route and replaces the div with the returned fragment.
Why a separate HTML file?
The response should be the div alone. Rendering the full home page would duplicate the document inside itself.
What changes on the server each tick?
The POST route draws a new uniform number and passes it into the fragment template before returning JSON.