基于Django的区市显示项目

最新推荐文章于 2024-04-12 04:14:51 发布

小赵呢

最新推荐文章于 2024-04-12 04:14:51 发布

阅读量125

点赞数

分类专栏： python django 文章标签： jquery django python ajax js

本文链接：https://blog.csdn.net/weixin_53227758/article/details/119766835

版权

python 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

django

9 篇文章 0 订阅

订阅专栏

jquery框架中提供.ajax $. g e t$ .post方法，用于进行异步交互，由于Django中默认使用CSRF约束，推荐使用$.get
1）将jquery文件拷贝到static/js/目录下。
在这里插入图片描述
2）打开booktest/views.py文件，定义视图area，用于显示下拉列表。

def areas(Request):
    '''省市县显示'''
    return render(Request , 'booktest/areas.html')

3）打开booktest/urls.py文件，配置url。

url(r'^areas$',views.areas),

4）在templates/booktest/目录下创建area.html。

首先是html的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市县选择案例</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function (){
            // 发起一个ajax请求/prov获取所有省级地区的信息
            // 获取信息用get
            // 设计信息修改用post
            // 获取prov下拉列表框
            prov = $('#prov')
            $.get('/prov',function (data){
                // 回调函数
                // res 数组获取每一个元素:[地区id,地区标题]
                res = data.data
                // 遍历res数组
                /* 换一种方式
                for(i=0; i<res.length; i++){

                    id = res[i][0]
                    atitle = res[i][1]
                    option_str = '<option value="'+id+'">'+atitle+'</option>'
                    // 向prov中加入下拉列表框
                    prov.append(option_str)
                }*/
                $.each(res, function (index, item) {
                    id = item[0]
                    atitle = item[1]
                    option_str = '<option value="'+id+'">'+atitle+'</option>'
                    // 向prov中加入下拉列表框
                    prov.append(option_str)
                })
            })


            // 绑定prov下拉列表的change事件
            prov.change(function (){
                // 发起一个ajax请求 /city获取省下面市的信息
                // 获取点击省的id
                prov_id = $(this).val()
                $.get('/city'+prov_id,function (data){
                    // 处理回调函数
                    res = data.data
                    // 获取city下拉列表框
                    city = $('#city')
                    // 清空列表框
                    dis = $('#dis')
                    // 清空列表框
                    dis.empty().append('<option value="">---请选择县---</option>')
                    city.empty().append('<option value="">---请选择市---</option>')
                    $.each(res, function (index, item) {
                    id = item[0]
                    atitle = item[1]
                    option_str = '<option value="'+id+'">'+atitle+'</option>'
                    // 向prov中加入下拉列表框
                    city.append(option_str)
                })
                })

            })

            // 绑定city下拉列表框事件
            $('#city').change(function (){
                // 发起一个ajax请求 /city获取省下面市的信息
                // 获取点击省的id
                city_id = $(this).val()
                $.get('/dis'+city_id,function (data){
                    // 处理回调函数
                    res = data.data
                    // 获取city下拉列表框
                    dis = $('#dis')
                    // 清空列表框
                    dis.empty().append('<option value="">---请选择县---</option>')
                    $.each(res, function (index, item) {
                    id = item[0]
                    atitle = item[1]
                    option_str = '<option value="'+id+'">'+atitle+'</option>'
                    // 向prov中加入下拉列表框
                    dis.append(option_str)
                })
                })

            })
        })
    </script>
</head>
<body>
<select name="" id="prov">
    <option value="">---请选择省---</option>
</select>
<select name="" id="city">
    <option value="">---请选择市---</option>
</select>
<select name="" id="dis">
    <option value="">---请选择县---</option>
</select>
</body>
</html>

5）运行服务器，在浏览器中输入如下网址：

http://127.0.0.1:8000/area/

6）打开booktest/views.py文件，定义视图prov，用于获取省信息。

def prov(request):
    '''获取省级行政区信息'''
    areas = AreaInfo.objects.filter(aParent__isnull=True)
    # 遍历areas并拼接json数据:标题,id
    areas_list = []
    for area in areas:
        areas_list.append((area.id,area.atitle))
    return JsonResponse({'data':areas_list})