Django:带有 onchange 操作的 Html 选择(不使用表单)和纯 Javascript:使用代码 200 重定向,但页面未加载

问题描述 投票:0回答:1

我的模板中有一个选择框,它通过 onchange 函数对更改做出反应,该函数将所选值发送到 Django 视图。视图从数据库获取所需的数据并应该显示它们。

main.html

{% block content %}
<select class="form-select form-select-lg mb-3 categorySelect select" name="categorySelect"  aria-label="Select category" onchange="getSelectedId(value)">
 <option value="None">Select category</option>
 <option value="all">All</option>
 <option value="cat1">Category 1</option>
 <option value="cat2">Category 2</option>
 </select>
 {% endblock %}

select.js

 function getSelectedId(selectedValue) { 
    const value = selectedValue; 
    const endpoint = "/all/select";
    fetch(endpoint + "?select_id=" + value)
    .then()
   .then(response => { 
   })
   }

views.py

def select(request):
      select_id = request.GET.get("select_id", "None")
      print(select_id)
      if select_id.__contains__('None'):
           return render(request, "home/main.html" )
      elif select_id.__contains__('all'): 
            return redirect(reverse('all:probe_list'))                                     
      elif select_id.__contains__('cat1'):
        selected = "Category 1"
        config = RequestConfig(request)
        resultTable = AllProbesTable(Probe.objects.filter(category = "cat1"))
        config.configure(resultTable)                                           
        return render(request, 'all/selectResults.html', {'table':resultTable, 'selected': selected}) 

我在视图中获得了正确的 select_id,并且从重定向中获得了 200,但页面没有更改(类似于 这个问题)。我知道我需要添加重新加载,例如“location.reload()”。我将其添加到我要重定向到的模板中,但这不起作用。

是否有任何方法可以触发重新加载,或者是否有其他方法可以仅使用 javascript 来实现带有 onchange 的选择框?

javascript django html-select
1个回答
0
投票

如果目标是重定向用户,那么只需重定向用户,不需要 AJAX:

function getSelectedId(selectedValue) { 
  const value = selectedValue; 
  const endpoint = "/all/select";
  window.location.replace(endpoint + "?select_id=" + value);
}

或者:

function getSelectedId(selectedValue) { 
  const value = selectedValue; 
  const endpoint = "/all/select";
  window.location.href = endpoint + "?select_id=" + value;
}

前者被视为 HTTP 重定向,而后者在功能上更类似于用户单击链接。

© www.soinside.com 2019 - 2024. All rights reserved.