在引导程序下拉列表中使用django的Ajax调用

Question

问题陈述：我无法通过从views.py调用一个函数并将上下文传递到reference_page.html而不刷新页面来在div中加载整个图表html。

我有一张和任何股票图表一样的图表。我有一个duration下拉列表，我使用了Bootstrap下拉列表。

<div class="dropdown show " style="float:left; ">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle" href="#">
<span id="selected" >Event Time</span><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1 Hour</a></li>
<li><a class="dropdown-item" href="#">1 day</a></li>
<li><a class="dropdown-item" href="#">1 Week</a></li>
<li><a class="dropdown-item" href="#">1 Month</a></li>
</ul>
</div>

我想在不刷新页面的情况下更新图表所在的潜水。为此，我在views.py中有一个"per_hour_data"函数，它以默认值"1小时"加载。

def per_hour_data(request, app_id, record_count):
app_detail = get_object_or_404(AppDetail, app_id=app_id)
line_data = line_chart_data(app_id,record_count)
app_data = AppDetail.objects.all()
context = {
'line_data':line_data,
'app_detail': app_detail,
'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
'app_data':app_data,
}
return render(request, 'status_monitor/reference_page.html', context)

reference_page.html包含图表数据以及我解析上下文的位置。现在我想做一些事情，比如当我选择不同的持续时间时，图表应该在不刷新页面的情况下更新。我想过用AJAX来做这件事。所以我写了另一个函数

def update_chart(request):
if request.is_ajax and request.method == "GET":
app_id = request.GET.get(app_id)
record_count = request.GET.get(record_count)
app_detail = get_object_or_404(AppDetail, app_id=app_id)
line_data = line_chart_data(app_id,record_count)
app_data = AppDetail.objects.all()
context = {
'line_data':line_data,
'app_detail': app_detail,
'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
'app_data':app_data,
}
return render(request, 'status_monitor/reference_page.html', context)

AJAX调用为

{% block javascript %}
<script>
$(".dropdown-menu li").click(function () {
var record_count = $(this).text();
var app_id = getElementById('#app_id');
$.ajax({
type:'GET',
url: '/update_chart/',
data: {
'record_count': record_count,
'app_id' : app_id
},
dataType: 'json',
success: function (data) {
alert(data.error_message);
},
error: function (response) {
console.log(response)
}
});
});
</script>
{% endblock %}

urls

urlpatterns = [
path('status/<app_id>/<str:record_count>/' ,views.per_hour_data, name='per_hour_data'),
path('update_chart/', views.update_chart, name='update_chart'),

]

我无法通过将上下文传递给reference_page.html来在div中加载整个html。

Answer 1

将您想要在不刷新主页面的情况下加载的所有代码放在reference_page.html中，并使用jQuery加载函数进行渲染。不使用$.ajax

我假设你的主html是main.html

您的主视图

def per_hour_data(request, app_id, record_count):
app_detail = get_object_or_404(AppDetail, app_id=app_id)
line_data = line_chart_data(app_id,record_count)
app_data = AppDetail.objects.all()
context = {
'line_data':line_data,
'app_detail': app_detail,
'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
'app_data':app_data,
}
return render(request, 'status_monitor/main.html', context)

您的main.html模板

<div class="dropdown show " style="float:left; ">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle" href="#">
<span id="selected" >Event Time</span><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1 Hour</a></li>
<li><a class="dropdown-item" href="#">1 day</a></li>
<li><a class="dropdown-item" href="#">1 Week</a></li>
<li><a class="dropdown-item" href="#">1 Month</a></li>
</ul>
</div>
<div class="chart">
{% include 'reference_page.html' %}
</div>

javascript函数-调用是在下拉值更改

function update_chart(record_count, app_id) {
$('.chart').html('').load(
"{% url 'update_chart' %}?record_count=" + record_count + "&app_id=" + app_id
);
}

您的ajax视图

def update_chart(request):
if request.is_ajax and request.method == "GET":
app_id = request.GET.get(app_id)
record_count = request.GET.get(record_count)
app_detail = get_object_or_404(AppDetail, app_id=app_id)
line_data = line_chart_data(app_id,record_count)
app_data = AppDetail.objects.all()
context = {
'line_data':line_data,
'app_detail': app_detail,
'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
'app_data':app_data,
}
return render(request, 'status_monitor/reference_page.html', context)

你也可以参考这个答案