Django:当ModelFrom自动生成Select标签后，通过ajax请求重新生成select标签内容（后台可添加条件约束）

---

前言

题目可能表达的不是很清楚，我详细说一下我遇到的问题。

我的页面通过django ModelForm自动生成后是这样子，但是我想实现当选择学院后再从后台查询到该学院的下设专业，在从页面上展示出来,而不是所有的专业，也就是外键相连表的所有数据。
所以我想通过jquery+ajax的方法，通过异步请求在页面不刷新的情况下完成。
下面是算法介绍

一、解决问题思路

首先我们需要了解ModelForm所自动生成Select标签的属性，比如说我的项目：

可以看到ModelForm,自动生成的select标签的属性（class属性是我自定义加的样式）分别有name,id,name为自动生成，我们就可以通过jquery通过id来对select组件进行操作，通过jquery查询到用户所选中的值，通过ajax发送到后台进行操作，并将要显示的专业返回并在前台显示。

二、具体操作

1.URL

我么要通过Ajax请求向后台发送数据，此时应写一个URL访问数据，专门来对数据进行处理

urlpatterns = [
    path('college_major/query/', constraint.college_major_query),
]

2.前端Js代码

 <script>
	# 因为ModelForm生成的Select标签时已经生成了数据，即数据库中的数据，
	# 我们不想让他显示就让在页面加载完后将select标签中的数据清除
	# 我这里是想操作专业，此时我就让专业清除
    $("#id_major").empty();
    	# change是在slelect标签内容改变时候运行function
        $("#id_college").change(function () {
            $("#id_major").empty();
            # 获取用户当前选择哪个选项，拿到他的value
            var college_id = $("#id_college").val();
            $.ajax({
            	# 通过刚才我们写的URL，向后台发送数据
                url: '/college_major/query/',
                # post类型
                type: "post",
                data: {"college_id": college_id},
                dataType: "JSON",
                success: function (res) {
                    if(res.status){
                    	# each是循环后台返回的字典
                        $.each(res.major_dict, function(name,value){
                               var option="<option value=\""+value+"\"";
                                option += ">"+name+"</option>"; //动态添加数据
                            $("#id_major").append(option);
                        })
                    }
                    else {
                        alert('学院下未设专业')
                    }
                }
            })
        });
    </script>

3.view层

import json
# from django.http import HttpResponse
from django.shortcuts import HttpResponse
from web import models
from django.views.decorators.csrf import csrf_exempt

# 记得加免除csrf认证，因为ajax是通过Post方式提交的数据
@csrf_exempt
def college_major_query(request):
    data_dict = {}
    major_dict = {}
    if request.method == 'POST':
        college_id = request.POST.get('college_id')
        # print(college_id)
        # 从后台数据库查询该学院下设专业
        colleges = models.Major.objects.filter(college_id=college_id).values('id', 'title')
        print(colleges)
        if colleges:
            for item in colleges:
                major_dict[item.get('title')] = item.get('id')
            # print(major_dict) # {'3D仿真': 1, '软件工程': 2, '网络建设': 3, '吹牛逼': 4}
            data_dict = {"status": True, 'major_dict': major_dict}
            # print(json.dumps(data_dict, ensure_ascii=False))
            # print(data_dict)
        else:
            data_dict = {"status": False}
    return HttpResponse(json.dumps(data_dict, ensure_ascii=False))

4.效果展示

1. 我的数据库中是这样，2是计算机与信息学院下设四个专业，3是经济管理学院下设两个专业

2,前端当未选择学院时专业是没有显示的

3.当选择学院后专业仅为该学院的下设专业

结束

同学们可以根据具体情况进行修改，不懂的可以私信我，我尽量解答，说的也可能不是很清楚，谅解！