Django: Update a value in html page without refreshing the page-CodePudding

I have a Rest API which I receive data every 10 seconds. I receive the data with time information that when the data sent. So, user should see the soonest data on the page.

That code would work but that also wont update the data without a refresh:

def get_datas(request):
   data = //find the soonest data
   return render(request, 'page.html', {'data': data})

What is the best solution for this?

CodePudding user response：

You could use Ajax, with, in your views.py, something like

def get_data(request):
    data = the_soonest_data
    return JsonResponse(data) // Your data have to be JSON serializable

Then in your page.html you can use Ajax to call your get_data view every 10 seconds or whatever time you'd like :

<script>
$(document).ready(function() {
                updateState()
    
              function updateState() {
                $.ajax({
                  url: "{% url 'your_app:get_data' %}", // if you have dynamic url
                  url: "get_data/" // if you don't have dynamic url
                  type: 'GET'
                })
                .done(response => {
                  const data = response


                  // do whatever you want with your data
                  

                  // rerun every 10 seconds
                  setTimeout(function() {
                    updateState()
                  }, 10000)
                })
              }
            })
</script>

Don't forget to download jQuery, or have this script in your html file :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

By doing this, once your page is loaded, it will get the jsonResponse of the get_data view every x seconds you set in the timeout part. If you want to stop at a certain point, just return before calling the updateState function.

Of course, you have to load your template for this code to work, so you should have a view which renders your 'page.html'.

Hope this helps ;)

CodePudding user response：

You are basically asking how to implement AJAX best, although I'd say there is no one “best” AJAX implementation. The most appropriate solution will always depend on your project's circumstances. jQuery is one old yet still effective solution.

That said, however, there is a more modern option that I'd recommend you to try, because it is particularly suited to Django: HTMX. With HTMX, for your simple use case of a periodically-refreshing piece of the page, you wouldn't need to write JavaScript. All you need is a simple HTML page that contains this:

<!-- Load the HTMX JS: -->
<script src="htmx.min.js" defer></script>
<!-- The magic happens here in one line: -->
<div hx-get="/data" hx-trigger="every 10s"></div>

This page can be served through a simple TemplateView. And then, your get_datas() view can remain the same, except that the page.html template should not contain a full HTML page. It should be just a page fragment (say, a sequence of divs), that renders your data into HTML. The snippet above assumes that get_datas() is served through the URL /data.

After the user loads the main HTML page, it will start calling /data every 10 seconds, and the response from that URL is inserted into the div with the hx-get attribute.

(You mentioned that your get_datas() view belongs to a “Rest API”, and while most “Rest API”s these days primarily return data in JSON format, REST technically is not limited to JSON. HTML is also perfectly valid, just like what your get_datas() view currently returns, given that it uses a 'page.html' template. This is one of the reasons why HTMX is convenient for Django; you don't have to bother with JSON for many use cases, and that saves you a lot of work.)

You can check out the HTMX docs here: https://htmx.org/docs/. In particular, see the section on polling.