Python---Django：通过ajax请求实现省市级案例的下拉列表框

最新推荐文章于 2021-11-08 13:53:30 发布

此时一位小白路过

最新推荐文章于 2021-11-08 13:53:30 发布

阅读量357

点赞数 1

分类专栏： python—Django3.1学习文章标签： ajax python django

本文链接：https://blog.csdn.net/weixin_45365220/article/details/109698643

版权

python—Django3.1学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

代码实例：

area.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请求 获取所有省级地区的信息
            // 获取信息，使用get
            // 涉及到信息修改，使用post

            // 浏览器发起Ajax get请求
            $.get('/prov', function (data) {
                // 回调函数

                // 获取prov下拉值
                prov = $('#prov')
                // 获取返回的json数据
                res = data.data

                // 遍历数组，获取每一个元素：[地区id，地区标题]
                /*
                for (i = 0;i<rel.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]
                    options_str = '<option value="'+id+'">'+atitle+'</option>'
                    # 将option_str的值加入prov下拉值里
                    prov.append(options_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.empty().append('<option>---请选择市---</option>')
                    $.each(res, function (index, item) {
                        city_id = item[0]
                        city_atitle = item[1]
                        city_options_str = '<option value="'+city_id+'">'+city_atitle+'</option>'
                        city.append(city_options_str)
                    })

                })

            })

            // 绑定city下拉列表的change事件，获取市下面县的地区
            $('#city').change(function () {
                // 发起一个ajax请求 /dis获取市下面的县级地区
                // 获取点击市的id
                city_id = $(this).val()

                $.get('/dis'+city_id, function (data) {
                    dis_data = data.data
                    dis = $('#dis')
                    dis.empty().append('<option>---请选择县---</option>')
                    $.each(dis_data, function (index, item) {
                        dis_id = item[0]
                        dis_attile = item[1]
                        dis_option = '<option value="'+dis_id+'">'+dis_attile+'</option>'
                        dis.append(dis_option)


                    })

                })


            })

        })

    </script>
</head>
<body>
<select id="prov">
    <option>---请选择省---</option>
</select>

<select id="city">
    <option>---请选择市---</option>
</select>
<select id="dis">
    <option>---请选择县---</option>
</select>
</body>
</html>

views.py

from django.http import JsonResponse
from booktest.models import AreaInfo


def area_show(request):
    return render(request, 'booktest/area.html')
    
def prov(request):
    '''获取所有省级地区的信息'''

    # 获取所有省级信息的查询集
    areas = AreaInfo.objects.filter(area_parent__isnull=True)

    areas_list = list()
    for i in areas:
        areas_list.append((i.id, i.area_name))

    return JsonResponse({'data': areas_list})


def city(request, pid):
    '''获取pid的下级地区的信息'''
    # area = AreaInfo.objects.get(id=pid)
    # areas = area.areainfo_set.all()
    areas = AreaInfo.objects.filter(area_parent__id=pid)

    areas_list = list()
    for area in areas:
        areas_list.append((area.id, area.area_name))

    return JsonResponse({'data':areas_list})

def dis(request, pid):
    '''获取市级以下县级地区'''

    areas = AreaInfo.objects.filter(area_parent__id=pid)
    area_list = list()
    for area in areas:
        area_list.append((area.id, area.area_name))

    return JsonResponse({'data':area_list})

urls.py

from django.urls import path,re_path
from booktest import views

urlpatterns = [
	path('areas', views.area_show)
	re_path(r'prov(\d+)$', views.prov),
	re_path(r'city(\d+)$', views.city),
	re_path(r'dis(d\+)$', views.dis),

]

此时一位小白路过

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Python---Django：通过ajax请求实现省市级案例的下拉列表框

代码实例：area.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(
复制链接

扫一扫