Django下拉框加载后端数据提交后显示空值问题求解

1. 后端逻辑顺序错误：当前代码先取值request.POST['Case_name']再判断请求方法是否为POST，GET请求访问时会直接抛出KeyError；同时两个POST分支传给模板的下拉数据源变量名不统一（一个是cases_name、一个是name），前端模板固定取某一个变量时，切换分支就会拿到空值，直接导致下拉框渲染空项。
2. 代码存在语法错误：第二个POST分支内的if(casename == 'xyz' and question == 'pqr'):缩进异常，运行时会触发Python缩进错误。
3. 缺少边界判断：没有对POST参数不存在的场景做兜底，参数缺失时直接抛错。

1. 修正后端views.py逻辑 #

统一下拉数据源的变量名，调整请求判断顺序，修复缩进，增加兜底逻辑：

def index(request):
    sparqlQueries = get_data()
    # 先判断请求方法，避免GET请求取POST参数报错
    if request.method == 'POST':
        # 先判断是否是拉取案件名称的请求
        if request.POST.get('Case_name') and not request.POST.get('Question'):
            name_cases = sparqlQueries.nameOfCases()
            data = {
                "select_options": name_cases, # 统一下拉选项的变量名
                'flag': True,
                'suffix':'Cases',
                'title':'Name of Cases'
            }
            return render(request,'index.html',context = data)
        # 处理具体查询请求
        casename = request.POST.get('Case_name', '')
        question = request.POST.get('Question', '')
        if casename == 'xyz' and question == 'pqr':
            judges = sparqlQueries.case2_judge_name()
            data = {
                "select_options": judges, # 和上面保持同一个变量名
                'flag':True,
                'suffix':'judges',
                'title':'Judge of Case2'
            }
            return render(request,'index.html', context = data)
    # GET请求兜底，初始化页面默认加载案件列表
    name_cases = sparqlQueries.nameOfCases()
    data = {
        "select_options": name_cases,
        'flag': True,
        'suffix':'Cases',
        'title':'Name of Cases'
    }
    return render(request, 'index.html', context=data)

2. 修正前端模板渲染逻辑 #

模板里下拉框统一循环select_options变量渲染选项，避免变量名不匹配导致空值：

<div>
  <label>{{ title }}</label>
  <select name="{{ suffix }}" id="refreshSelect">
    <!-- 统一循环后端传的select_options -->
    {% for opt in select_options %}
    <option value="{{ opt }}">{{ opt }}</option>
    {% endfor %}
  </select>
</div>

提供两种可直接用的方案，按需选择即可。

方案1：整页刷新（无需额外写接口） #

给下拉框绑定聚焦事件，点击下拉时自动提交表单拉取最新数据，适合不想写异步逻辑的场景：

<select name="{{ suffix }}" id="refreshSelect" onfocus="refreshSelect()">
  {% for opt in select_options %}
  <option value="{{ opt }}">{{ opt }}</option>
  {% endfor %}
</select>
<!-- 隐藏刷新用的表单 -->
<form action="" method="post" id="refreshForm" style="display: none;">
  {% csrf_token %}
  <input type="hidden" name="refresh_flag" value="1">
</form>
<script>
function refreshSelect(){
  // 点击下拉时提交表单，后端可以加判断refresh_flag的逻辑返回最新选项
  document.getElementById('refreshForm').submit()
}
</script>

后端对应加一个refresh_flag的判断即可，逻辑和之前拉取对应选项的逻辑一致。

方案2：异步无刷新（体验更好） #

点击下拉时发异步请求拿最新选项，动态替换下拉内容，不会整页刷新：
首先后端加一个异步接口的判断，返回json格式的选项：

# 在views.py的POST判断里加
if request.POST.get('async_refresh'):
    # 这里根据你当前需要的下拉类型返回对应选项，示例返回法官列表
    options = sparqlQueries.case2_judge_name()
    return JsonResponse({"options": list(options)})

然后前端加异步请求逻辑：

<select name="{{ suffix }}" id="asyncSelect">
  {% for opt in select_options %}
  <option value="{{ opt }}">{{ opt }}</option>
  {% endfor %}
</select>
<script>
const selectDom = document.getElementById('asyncSelect')
// 标记是否已经加载过最新数据，避免每次点击都重复请求
let loaded = false
selectDom.addEventListener('focus', async ()=>{
  if(loaded) return
  const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value
  const res = await fetch('', {
    method: 'POST',
    headers:{'X-CSRFToken': csrf, 'Content-Type':'application/x-www-form-urlencoded'},
    body: 'async_refresh=1'
  })
  const data = await res.json()
  // 清空原有选项
  selectDom.innerHTML = ''
  // 渲染新选项
  data.options.forEach(opt=>{
    const option = document.createElement('option')
    option.value = opt
    option.innerText = opt
    selectDom.appendChild(option)
  })
  loaded = true
})
</script>

如果你的选项列表会动态更新，可以去掉loaded标记，每次点击都拉取最新数据即可。

内容的提问来源于stack exchange，提问作者anonymouser