Javascript 如何处理Django中的可靠下拉列表

我正试图在Django上创建一个可靠的下拉列表，但由于我的JavaScript/ajax知识不是很好，我已经触底。注：我已经阅读了之前关于这个问题的问题，但没有一个完全解决了我的问题

问题描述：

由于数据库的大小，每当请求视图时，我都会从服务器检索部分数据。这使得我使用表单的工作更加困难，因为我使用用户的用户名来过滤我的服务器。这是我的代码的简化版本

url.py

urlpatterns = [
    url(r'^SpecificVessel', views.SpecificVessel, name="goSpecificVessel"),
]

@login_required
def SpecificVessel(request):

  #Get the username to filter the tables from SQL Server:
  username = None
  if request.user.is_authenticated:
      username = request.user.username

  #Get the shipnames. 
  cursor.execute("select distinct SHIPNAME from Table where [GROUP]=" + "'" + username + "'")
  row = cursor.fetchall() 
  df_listofships = pd.DataFrame(data=row, columns=['SHIPNAME'])
  shipnames = list(df_listofships['SHIPNAME'].tolist())  # LIST FOR SHIP SELECTION

  #Get All the data from database.
  cursor.execute("select * from Table2 where [GROUP]=" + "'" + username + "'")
  row = cursor.fetchall()
  df = pd.DataFrame(data=row)
  colnames = list(dftrans.columns.values.tolist()) #LIST FOR YEAR DROPDOWN SELECTION

  #getting the dropdown selections:
  Dropdown_shipname = request.POST.get('Dropdown_shipname')
  Dropdown = request.POST.getlist('Dropdown')
  
  
  return render(request, 'SpecificVessel.html', 
               {'colnames': colnames, 'Dropdown': Dropdown, 'shipnames': shipnames, 'Dropdown_shipname': Dropdown_shipname,})

视图.py

urlpatterns = [
    url(r'^SpecificVessel', views.SpecificVessel, name="goSpecificVessel"),
]

@login_required
def SpecificVessel(request):

  #Get the username to filter the tables from SQL Server:
  username = None
  if request.user.is_authenticated:
      username = request.user.username

  #Get the shipnames. 
  cursor.execute("select distinct SHIPNAME from Table where [GROUP]=" + "'" + username + "'")
  row = cursor.fetchall() 
  df_listofships = pd.DataFrame(data=row, columns=['SHIPNAME'])
  shipnames = list(df_listofships['SHIPNAME'].tolist())  # LIST FOR SHIP SELECTION

  #Get All the data from database.
  cursor.execute("select * from Table2 where [GROUP]=" + "'" + username + "'")
  row = cursor.fetchall()
  df = pd.DataFrame(data=row)
  colnames = list(dftrans.columns.values.tolist()) #LIST FOR YEAR DROPDOWN SELECTION

  #getting the dropdown selections:
  Dropdown_shipname = request.POST.get('Dropdown_shipname')
  Dropdown = request.POST.getlist('Dropdown')
  
  
  return render(request, 'SpecificVessel.html', 
               {'colnames': colnames, 'Dropdown': Dropdown, 'shipnames': shipnames, 'Dropdown_shipname': Dropdown_shipname,})

specificVesser.html

<form method="post">
   {% csrf_token %}
   <div class="form-group col-md-4">
        <label for="Dropdown_shipname"><b>Select Vessel</b></label>
               <select name="Dropdown_shipname" id="Dropdown_shipname" data-style="btn-default" class="selectpicker form-control" >
                   {% for i in shipnames %}
                       <option value="{{ i }}" {% if Dropdown_shipname == i %}  selected {% endif %}>{{ i }} </option>
                   {% endfor %}
                </select>
   </div>



   <div class="form-group col-md-4">
       <label for="Dropdown"><b> Select Month </b></label>
             <select name="Dropdown" id="Dropdown" data-style="btn-default" class="selectpicker form-control" multiple>
                  {% for i in colnames %}
                       <option value="{{ i }}" {% if Dropdown == i %}  selected {% endif %} >{{ i }} </option>
                  {% endfor %}
              </select>
   </div>
            

   <div class="form-group col-md-1 margin_top_25">
        <input type="submit" value="Submit" />
   </div>
            
</form>

{%csrf_令牌%}
选择船只
{shipnames%中的i的%s}
{{i}
{%endfor%}
选择月份
{colnames%%中的i的%s}
{{i}
{%endfor%}

有什么问题吗？

上面代码中的解决方案为我提供了独立的下拉列表。也就是说，每当出现不匹配时，它都会向我抛出一个错误。我一直试图以不同的方式来处理这个问题，然而，在网上长期研究之后，我发现javascript或ajax可能是解决这个问题的方法。我的问题是：在用户提交结果之前，我是否可以通过任何方式获得用户在下拉列表中选择的内容？如果是，您将如何解决此问题？

---

我希望我说得够清楚了。请让我知道我是否应该更好地解释这个问题。

在回答您的主要问题之前，我觉得有很多问题需要解决

如果request.user.is\u经过身份验证，

位是不必要的；您已经使用
@login\u required
装饰视图，因此用户不可能未经身份验证

光标从哪里来？看起来您使用的不是Django的数据库（ORM，甚至是原始游标），而是其他东西？为什么呢？

在多线程情况下，在请求之间共享全局
光标时，可能会导致生产线出现问题。（使用Django的数据库功能，可以在请求之间正确重置数据库连接，并且每个线程都有自己的连接。）

您的SQL查询容易受到SQL注入攻击，因为您只是将字符串连接在一起。您需要使用占位符（参数化查询）。这取决于您使用的数据库和数据库驱动程序

从数据库结果中提取数据绝对不需要熊猫和熊猫数据框！（我最讨厌的是：熊猫的无用用途。）

• 第一次检索将是

  shipnames=[row[0]for row in cursor]

• 第二次检索将是

  colnames=[d[0]表示游标中的d.description]

  （或类似内容；取决于您的数据库）。（但是，您确实不希望仅为了获取列名而获取大量行；一行即可，例如标准SQL中的

  LIMIT 1

  ）

您应该使用Django表单来管理表单。这样，您就不需要手动渲染

和

以及所选的

了。

此视图可能会成为
FormView
子类
你说“这使得我使用表单的工作更加困难，因为我使用用户的用户名来过滤我的服务器”，但这不是问题。您可以将Django
请求
，或仅将
用户
，或
用户名
，传递到自定义表单类，并让它根据它动态修改甚至向表单添加字段

也就是说，这里最简单的解决方案是使用一点点JavaScript，为第一个选择添加一个查询字符串参数来刷新页面。也就是说，当用户更改shipname字段时，您需要使用例如

？shipname=selection here

刷新页面，并为视图代码中的其他字段找出正确的选择

我能想到的最简单的方法是

<script>
document.getElementById("Dropdown_shipname").addEventListener("change", (event) => {
  location.href = `?shipname=${event.target.value}`;
}, false);
</script>

document.getElementById（“下拉菜单”\u shipname”）.addEventListener（“更改”，（事件）=>{
location.href=`？shipname=${event.target.value}`；
}，假）；

除此之外，您可以使用AJAX请求选择性地只刷新页面的一部分，除此之外，还可以将表单重构为处理表单的React.js或Vue.js组件

---

但是无论如何，不，没有JavaScript，您将无法动态更改另一个字段。

我将逐一回答您的要点：1。谢谢你的建议。我将改进我的代码。2.我省略了代码，因为我不想使文件过于复杂。3.这似乎与主题无关，但您建议我如何处理SQL server结构？4.我使用熊猫是因为我在做一些其他的计算，我在这里没有展示。关于javascript或ajax部分，我应该怎么做？如果你给我看一些代码作为指导，可以吗？添加了一个最少的JavaScript示例。最后一个问题。如何将更新的选择传递给视图？类似于：POST.get（'Dropdown\u shipname'）？或者我需要写些别的东西？查询字符串参数可用作

request.GET.GET（'shipname'）

。感谢您提供的所有详细答案。你让我开心！