django三级联动
HTML：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 1. 导入CSS的全局样式 --><link href="../static/css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="../static/js/jquery-3.7.1.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="../static/js/bootstrap.min.js"></script><style>/* 自定义样式 */.selectpicker {border-radius: 20px;transition: all 0.3s ease;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}.selectpicker:hover {border-color: #66afe9;box-shadow: 0 2px 8px rgba(102, 175, 233, .6);}.bootstrap-select .dropdown-menu {border-radius: 15px;margin-top: 5px;}.bootstrap-select.btn-group .dropdown-toggle .filter-option {font-weight: 500;}.dropdown-menu > li > a {padding: 10px 20px;transition: background 0.3s;}.dropdown-menu > li > a:hover {background: linear-gradient(to right, #f8f9fa, #e9ecef);color: #333;}</style>
</head>
<body>
地址:
<select id="se1"><option>--请选择--</option>
</select>省
<select id="se2"><option>--请选择--</option>
</select>市
<select id="se3"><option>--请选择--</option>
</select>县{#<div class="container" style="margin-top: 30px;">#}
{# <div class="row">#}
{##}
{##}
{# <div class="col-sm-4">#}
{# <div class="form-group">#}
{# <select id="se" class="selectpicker form-control" data-style="btn-primary" title="-- 请选择省份 --">#}{# {% for province in provinces %}#}{# <option value="{{ province.id }}"#}{# {% if province.id == selected_id %}selected{% endif %}>#}{# {{ province.name }}#}{# </option>#}{# {% endfor %}#}{# {% for province in provinces %}#}{# <option value="{{ province.id }}">{{ province.name }}</option>#}{# {% endfor %}#}
{# </select>#}
{# </div>#}
{# </div>#}
{##}
{##}
{# <div class="col-sm-4">#}
{# <div class="form-group">#}
{# <select id="se1" class="selectpicker form-control" data-style="btn-success" title="-- 请选择城市 --">#}
{# </select>#}
{# </div>#}
{# </div>#}
{##}
{# <div class="col-sm-4">#}
{# <div class="form-group">#}
{# <select id="se2" class="selectpicker form-control" data-style="btn-info" title="-- 请选择区县 --">#}
{# </select>#}
{# </div>#}
{# </div>#}
{# </div>#}
{#</div>#}<script>//页面就绪函数$(function () {//初始化值 把省份查询出来$.ajax({url: "/three/",dataType: "json",type: "post",data: {method: "get1"},success: function (date) {console.log(date);//清空select 下拉框// $("#se1").children().not(":eq(0)").remove();//遍历数据for (var i = 0; i < date.length; i++) {console.log(date[i].name);$("#se1").append("<option value=" + date[i].id + ">--" + date[i].name + "--</option>");}}});});//下拉框2 当下拉框 省1内容发生改变，我就执行$("#se1").change(function () {//你选择是那个省 用来当做父idvar id = $("#se1").val();// alert("下拉框被改变" + id);$.ajax({url: "/three/",type: "post",data: {method: "get",id: id},dataType: "json",success: function (date) {//清空select 下拉框$("#se2").children().not(":eq(0)").remove();$("#se3").children().not(":eq(0)").remove();//遍历数据for (var i = 0; i < date.length; i++) {console.log(date[i].name);//追加$("#se2").append("<option value=" + date[i].id + ">--" + date[i].name + "--</option>");}}});});//下拉框3 当下拉框2内容发生改变，我就执行$("#se2").change(function () {var id = $("#se2").val();$.ajax({url: "/three/",type: "post",data: {method: "get3",id: id},dataType: "json",success: function (date) {//清空select 下拉框$("#se3").children().not(":eq(0)").remove();//遍历数据for (var i = 0; i < date.length; i++) {console.log(date[i].name);$("#se3").append("<option value=" + date[i].id + ">--" + date[i].name + "--</option>");}}});});</script></body>
</html>model.py
from django.db import modelsclass City(models.Model):name = models.CharField(max_length=50)province = models.ForeignKey('Province', models.DO_NOTHING)class Meta:managed = Falsedb_table = 'city'class District(models.Model):name = models.CharField(max_length=50)city = models.ForeignKey(City, models.DO_NOTHING)class Meta:managed = Falsedb_table = 'district'class Province(models.Model):name = models.CharField(max_length=50)class Meta:managed = Falsedb_table = 'province'
view.py
def three(request):global dataif request.method == "GET":print("跳转页面")return render(request, "三级联动.html")else:print("post请求")method = request.POST.get("method")print("[POST] 收到method参数:", method) # 调试关键参数if method == "get1":provinces = Province.objects.all()print("[get1] 省份数据:", provinces) # 验证数据格式 因为QuerySet对象本身不可序列化。所以必须先将其转换为列表或类似结构。data = [{'id': p.id, 'name': p.name} for p in provinces]print(data)# 建议所有数据接口返回统一格式return JsonResponse(data, safe=False) # 必须转为列表 + safe=Falseelif method == 'get':print("[POST] 收到method参数:", method)parent_id = request.POST.get('id')cities = City.objects.filter(province=parent_id)data = [{'id': c.id, 'name': c.name} for c in cities]return JsonResponse(data, safe=False)elif method == 'get3':print("[POST] 收到method参数:", method)parent_id = request.POST.get('id')areas = District.objects.filter(city=parent_id)data = [{'id': a.id, 'name': a.name} for a in areas]return JsonResponse(data, safe=False)
url.py
urlpatterns = [path('three/', views.three),]