django-多级联动-前端效果

最新推荐文章于 2025-11-08 14:40:40 发布

原创最新推荐文章于 2025-11-08 14:40:40 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

本文详细介绍了一个基于Ajax请求的地区联动下拉框实现过程，包括页面路由设置、视图函数编写、数据库查询以及前端jQuery效果实现。通过具体代码示例，展示了如何从数据库中获取省级信息，并响应省份选择变化，动态加载市级信息。

小结

页面的路由

在这里插入图片描述

页面的视图

在这里插入图片描述

模板页样式

在这里插入图片描述

数据库里的内容

内容都是随机出来的

省份的外键值为空

其它情况一样

在这里插入图片描述

核对一下模型类

class City(models.Model):
    name = models.CharField(verbose_name="地名", max_length=20)
    pid = models.ForeignKey("self", on_delete=models.CASCADE, default=None, null=True)

—开始—

页面载入后要先有省级的内容

》发一个ajax请求，拿省级的内容

》路由

在这里插入图片描述

》视图

# 查询全部省份
def province(request):
    all_province = models.City.objects.filter(pid__isnull=True)
    province_info_list = [(province.id, province.name) for province in all_province]
    return  JsonResponse(province_info_list)

让jquery生效

》先完成基本功能，让jquery生效

<!doctype html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test_linkage</title>
    <script src="{% get_static_prefix %}js/jquery-1.12.4.min.js"></script>
    <script>
        $(main);
        function main() {
            alert(111);

        }
    </script>

</head>
<body>

<select name="province" id="">
    <option value="">--省份--</option>
</select>

<select name="city" id="">
    <option value="">--城市--</option>
</select>

<select name="area" id="">
    <option value="">--区域--</option>
</select>

</body>
</html>

能够弹出东西，就OK

在这里插入图片描述