jquery - 在引导下拉列表中使用 django 进行 Ajax 调用
问题描述
问题陈述:我没有办法通过从views.py调用一个函数并将上下文传递给referencenece_page.html而不刷新页面来在div中加载整个图表html。
我有一个图表,就像任何股票图表一样。我有一个持续时间下拉列表,我使用了 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 %}
网址
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。
解决方案
将您想要在不刷新主页的情况下加载的所有代码放入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)
你也可以参考这个答案
推荐阅读
- spring - 当我尝试使用 2 个集合加载实体时,MultipleBagFetchException 使用 JPA EntityGraph
- python - 使用 python 启动/停止 Azure Function App
- c# - jquery文件未在mvc应用程序的边缘加载
- r - H2O xgboost mojo 预测警告
- php - 如何使用 php 和 mysqli 在 html 页面中的数据库中的框中显示用户帐户图片和名称?
- java - 部署之间 Karaf 中的捆绑包完整性不一致
- akka.net - Akka.NET:将 akka.net 集群中的子 Actor 创建限制在单台机器上
- java - 通过参数从自定义 ArrayList 中删除重复项
- android - SharedPreferences 可以不保存吗?
- javascript - 如何在typeORM中保存@ManyToMany中的关系