使用中间件存储的数据异步更新页面
Asynchronously update page with data that are stored by middleware
我有中间件,它将所有 http 请求存储到数据库中。
我还有一个视图,它从数据库中获取数据并将这些数据放入上下文中。
views.py
def requests(request):
http_requests = WebRequest.objects.all()
context = {
"http_requests": http_requests
}
return render(request, "requests.html", context)
如何在收到新请求时异步更新此页面上的数据(因此,新请求应异步出现在此页面上)?我可以仅使用 Django 功能来实现此类行为,还是需要使用一些 javascript 库?
这取决于你想花多少时间在这个项目上。正如 Lorenzo 所说,创建一个 API 并让 javascript-frameworks(例如 emberjs 或 angularjs)处理异步性可能是有意义的。我不认为你可以用纯 Django 来处理这个......
如果您没有时间并且需要一些 'hack',您可以通过轮询 url 并用响应替换整个文档来替换您的页面内容:
$.ajax({
type: "GET",
url: "<url_to_your_requests_view>",
success: function(response){
$('body').html(response);
}
});
这不是干净的,但应该可以作为一个快速的肮脏技巧...
编辑:如果您只想交换网站的某些部分,您可以将其分解为只向页面添加元素:
$.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
});
}
});
我有中间件,它将所有 http 请求存储到数据库中。
我还有一个视图,它从数据库中获取数据并将这些数据放入上下文中。
views.py
def requests(request):
http_requests = WebRequest.objects.all()
context = {
"http_requests": http_requests
}
return render(request, "requests.html", context)
如何在收到新请求时异步更新此页面上的数据(因此,新请求应异步出现在此页面上)?我可以仅使用 Django 功能来实现此类行为,还是需要使用一些 javascript 库?
这取决于你想花多少时间在这个项目上。正如 Lorenzo 所说,创建一个 API 并让 javascript-frameworks(例如 emberjs 或 angularjs)处理异步性可能是有意义的。我不认为你可以用纯 Django 来处理这个...... 如果您没有时间并且需要一些 'hack',您可以通过轮询 url 并用响应替换整个文档来替换您的页面内容:
$.ajax({
type: "GET",
url: "<url_to_your_requests_view>",
success: function(response){
$('body').html(response);
}
});
这不是干净的,但应该可以作为一个快速的肮脏技巧...
编辑:如果您只想交换网站的某些部分,您可以将其分解为只向页面添加元素:
$.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
});
}
});