在引导下拉列表中使用 django 进行 Ajax 调用

Posted 2023-02-24

【中文标题】在引导下拉列表中使用 django 进行 Ajax 调用

【英文标题】：Ajax call with django on bootstrap dropdown

【发布时间】：2020-08-20 09:46:34

【问题描述】：

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

我有一个图表，就像任何股票图表一样。我有一个持续时间下拉列表，我使用了 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 来将整个html 加载到div 中。

【参考方案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)

你也可以参考这个answer