Динамическое обновление шаблона Django новыми данными

Я создаю сайт о крикете, который показывает live scores крикетных матчей, используя Django.. Ниже я показал пример views.py для моего сайта:

Views.py

def livescores():
    # generates livescores and returns a dict containing live scores
    return scores

def display_scores(request):
    # calls the livescores function and gets the dict and 
    #passes it to django template for rendering purposes
    scores = livescores()
    return render(request, 'LiveScores/display_scores.html', scores)

Вот шаблон Django, которому он передает этот dict:

Проблема

Теперь возникает проблема: На самом деле я хочу, чтобы этот шаблон обновлял свое содержимое в (section id='main-content') динамически и я не знаю, как это сделать. Я просмотрел несколько ответов на stackoverflow.com и google относительно использования Ajax для этой цели, но это мне не помогло! Некоторые ответы приводили к дублированию navbar при обновлении содержимого, а другие просто заполняли тег ненужными вещами, такими как 'Bootstrap CDN links', 'title tag' и т.д.... Любая помощь будет принята с благодарностью!

u need rest api that return json

from django.http import HttpResponse

def get_ajax_data(request):     
    scores=livescores()   
    return HttpResponse(json.dumps(scores), content_type='application/json')

и в вашем ajax вызове. здесь я использую jquery

         var team1=$(`<div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{Team1}</h5>
                  <p class="card-text">{RunRate}</p>
                </div>
              </div>
            </div>`)
          var desk=$(`<div class="col-sm-4">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">{result}</h5>
                    <p class="card-text">{situation}</p>
                  </div>
                </div>
              </div>`)
           var team2=$(`<div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{Team2}</h5>
                  <p class="card-text">* LIVE</p>
                </div>
              </div>
            </div>`)
$(function(){
  setTimeout(function(){
     $.ajax({
          method: "GET",
          url: "{% url 'ajax_data' %}",
          data: {data: your_additional_data_to_send}
        }).done(function( score) {
       
       
       $(team1).find(".card-title").text(score.team1)
       $(team1).find(".card-text").text(score.runrate)
       $(desk).find(".card-title").text(score.result)
       $(desk).find(".card-text").text(score.situation)
       $(team2).find(".card-title").text(score.team2)
      
       $("#main-content").html(team1)           
       $("#main-content").append(desk)
       $("#main-content").append(team2)
      });
   },4000)


})

Если вы не хотите углубляться в ajax/js (в какой-то момент в будущем вам это понадобится), я могу порекомендовать использовать htmx (htmx.org)

Измените свое представление на:

def livescores(request=None):
    # generates livescores and returns a dict containing live scores
    if request is None:
        return scores
    else:
        return render(request, 'livescores/components/livescores.html', scores)

В шаблоне livescores/components/livescores.html:

  <div class="row">
            <div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{{Team1}}</h5>
                  <p class="card-text">{{RunRate}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">{{result}}</h5>
                    <p class="card-text">{{situation}}</p>
                  </div>
                </div>
              </div>
            <div class="col-sm-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">{{Team2}}</h5>
                  <p class="card-text">* LIVE</p>
                </div>
              </div>
            </div>
        </div>

поэтому в вашем коде ничего не меняется.

Добавьте urlpattern для livescores в ваш urls.py

в главном шаблоне livesocres.html измените:

 <section class="container" id="main-content">

to:

 <section class="container" id="main-content" hx-get="/url/to/livescores" hx-trigger="every 5s">

и добавить: 

  <script src="https://unpkg.com/htmx.org@1.7.0"></script>
Вернуться на верх