Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

一、知识点

1.jquery的ajax请求写法

<script src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.get('/areas',function(data){
		//处理请求数据
		})
		$.post('/areas',{'num':1},function(data){
		//处理请求返回数据
		})
	})
</script>

二、实例

1. app1/views.py

from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from project1.settings import MEDIA_ROOT #导入上传文件保存路径 或 from django.conf import settings
from app1.models import PicTest,AreaInfo #导入图片模型类


# /index
def index(request):
	return render(request,'app1/index.html')


# /areas 省市下拉联动展示页
def areas(request):
	return render(request,'app1/areas.html')

# /prov 处理ajax请求，返回所有省
def prov(request):
	areas=AreaInfo.objects.filter(aParent__isnull=True)
	prov=[]
	for p in areas:
		prov.append((p.id,p.atitle))
	return JsonResponse({'data':prov})

#/city
def city(request, pid):
    '''获取pid的下级地区的信息'''
    # 1.获取pid对应地区的下级地区

	#获取方法1
    # area = AreaInfo.objects.get(id=pid)
    # areas = area.areainfo_set.all()
    
    #获取方法2
    areas = AreaInfo.objects.filter(aParent__id=pid)

    # 2.变量areas并拼接出json数据：atitle id
    areas_list = []
    for area in areas:
        areas_list.append((area.id, area.atitle))

    # 3.返回数据
    return JsonResponse({'data': areas_list})

2. templates/app1/areas.html

<!DOCTYPE html>
<html>
<head>
	<title>下拉表-省市联动</title>
</head>
{% load static %}
<!-- <script src="{% static 'js/jquery.js' %}"></script> -->

<script src="/static/js/jquery.js"></script>
<script>
	$(function(){
		$.get('/prov',function(data){
			res=data.data //【1】返回的数据
			prov=$('#prov') //【2】得到省份的DOM位置

			/*//【方法1】循环处理get请求返回的数据
			for (i =0;  i<res.length; i++) {
				id=res[i][0] //【1】得到返回数据的ID
				title=res[i][1] //【2】得到返回的标题
				//【3】拼接option字段
				option_str='<option value="'+id + '">'+ title+ '</option>'
				prov.append(option_str) //【4】把数据逐个添加到省的下拉列表中
			}*/
		
			//【方法2】循环处理get请求返回的数据
		$.each(res,function(index,item){
			id=item[0]
			title=item[1]
			option_str='<option value="'+id + '">'+ title+ '</option>'
			prov.append(option_str)
		})



		 // 绑定prov下拉列表框的change事件，获取省下面的市的信息
            $('#prov').change(function () {
                // 发起一个ajax请求 /city，获取省下面市级地区的信息
                // 获取点击省的id
                prov_id=$(this).val()
                $.get('/city'+prov_id, function (data) {
                    // 获取返回的json数据
                    res = data.data
                    // 获取city下拉列表框
                    city = $('#city')
                    // 清空city下拉列表框
                    city.empty().append('<option>---请选择市---</option>')
                    // 获取dis下拉列表框
                    dis = $('#dis')
                    // 清空dis下拉列表框
                    dis.empty().append('<option>---请选择县---</option>')
                    // 变量res数组，获取每一个元素:[地区id, 地区标题]
                    // 遍历取值添加到city下拉列表框中
                    $.each(res, function (index, item) {
                        id = item[0]
                        atitle = item[1]
                        option_str = '<option value="'+id + '">'+ atitle+ '</option>'
                        // 向city下拉列表框中追加元素
                        city.append(option_str)
                    })
                })
            })




             // 绑定city下拉列表框的change事件，获取市下面的县的信息
            $('#city').change(function () {
                // 发起一个ajax请求 /dis，获取市下面县级地区的信息
                // 获取点击市的id
                city_id=$(this).val()
                $.get('/dis'+city_id, function (data) {
                    // 获取返回的json数据
                    res = data.data
                    // 获取dis下拉列表框
                    dis = $('#dis')
                    // 清空dis下拉列表框
                    dis.empty().append('<option>---请选择县---</option>')
                    // 变量res数组，获取每一个元素:[地区id, 地区标题]
                    // 遍历取值添加到dis下拉列表框中
                    $.each(res, function (index, item) {
                        id = item[0]
                        atitle = item[1]
                        option_str = '<option value="'+id + '">'+ atitle+ '</option>'
                        // 向dis下拉列表框中追加元素
                        dis.append(option_str)
                    })
                })
                })
	})
	})
</script>
<body>

	<select id='prov'>
		<option>下拉选择省</option>
	</select>
	<select id='city'>
		<option>下拉选择市</option>
	</select>
	<select id='dis'>
		<option>下拉选择县</option>
	</select>

</body>
</html>

3. app1/urls.py

from django.contrib import admin
from django.urls import path,re_path
from app1 import views

urlpatterns = [
    path('index/', views.index),

    path('areas', views.areas), # 省市县下拉选择联动
    path('prov/',views.prov), # ajax请求处理页，返回所有省
    path('city<pid>',views.city), # ajax请求处理页，返回所有市
    path('dis<pid>',views.city), # ajax请求处理页，返回所有县，因为和市所用过程相同，所以使用同一个处理函数city
]

附件：setting.py设置

LANGUAGE_CODE = 'zh-hans'#en-us
TIME_ZONE = 'Asia/Shanghai'#UTC
USE_I18N = True
USE_L10N = True
USE_TZ = True

# 静态Url设置
STATIC_URL = '/static/'
# 静态文件设置
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

# 设置上传文件的保存目录
MEDIA_ROOT=os.path.join(BASE_DIR,"static/media")