Асинхронно обновлять страницу с данными, которые хранятся промежуточным программным обеспечением

Question

У меня есть промежуточное программное обеспечение, которое хранит все HTTP-запросы в БД.

Также у меня есть представление, которое извлекает данные из БД и помещает эти данные в контекст.

views.py

def requests(request): 
    http_requests = WebRequest.objects.all() 
    context = { 
     "http_requests": http_requests 
    } 
    return render(request, "requests.html", context) 

Как асинхронно обновить данные на этой странице, как новые запросы поступают в систему (так, новые запросы должны появиться на этой странице асинхронно)? Могу ли я использовать только функции Django для достижения такого поведения, или мне нужно использовать некоторые библиотеки javascript?

Answer 1

Это зависит от того, сколько времени вы хотите потратить на проект. Как заявил Лоренцо, может иметь смысл создать API и иметь javascript-рамки (например, emberjs или angularjs), обрабатывающие асинхронность. Я не думаю, что вы можете справиться с этим с чистым django ... Если у вас нет времени и вы хотите «взломать», вы можете просто заменить содержимое своей страницы, опросив URL-адрес и заменив весь документ ответом :

$.ajax({ 
     type: "GET", 
     url: "<url_to_your_requests_view>", 
     success: function(response){ 
      $('body').html(response); 
     } 
    }); 

Это не чистый, но должен работать быстро с подвохом ...

EDIT: Если вы хотите обменять определенные части вашего сайта, вы можете разбить его просто добавить элементы на страницу:

$.ajax({ 
     type: "GET", 
     url: "<url_to_your_requests_view>", 
     success: function(response){ 
      var newlyAddedRows = // find your newly added rows through some jquery 
      newlyAddedRows.forEach(function(row){ 
       $('#request-holder').append(row); 
      }); 

     } 
    }); 

ИЛИ С JSON

$.ajax({ 
     type: "GET", 
     url: "<url_to_your_requests_api_endpoint>", 
     success: function(response){ 
      var requestRows = response.requestItems 
      var $requestsHolder = $('#request-holder'); 
      $requestHolder.empty(); 
      requestRows.forEach(function(row){ 
       requestsHolder.append('<div class="request-row">' + <visualize your data somehow> + '</div>'); //e.g. row.timestamp if you have that in your json 
      }); 

     } 
    });