django-多级联动-前端效果

最新推荐文章于 2021-10-18 15:03:02 发布

鲸鱼编程pyhui

最新推荐文章于 2021-10-18 15:03:02 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/ifubing/article/details/100767786

版权

小结

页面的路由

在这里插入图片描述

页面的视图

在这里插入图片描述

模板页样式

在这里插入图片描述

数据库里的内容

内容都是随机出来的

省份的外键值为空

其它情况一样

在这里插入图片描述

核对一下模型类

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

在这里插入图片描述

发起ajax请求

在这里插入图片描述

省份下拉框变化

》要发起一个请求

在这里插入图片描述

配一个城市的路由

在这里插入图片描述

视图获到的全部市

在这里插入图片描述

收到城市列表后处理

在这里插入图片描述

鲸鱼编程pyhui

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
django-多级联动-前端效果

小结页面的路由页面的视图模板页样式数据库里的内容内容都是随机出来的省份的外键值为空其它情况一样核对一下模型类class City(models.Model): name = models.CharField(verbose_name="地名", max_length=20) pid = models.ForeignKey("self", on_delet...
复制链接

扫一扫