一、知识点

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")

效果：http://localhost:8000/areas

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

  1. 自己编写的仿京东移动端的省市联动选择JQuery插件

    概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...

  2. 二十五、【开源】EFW框架Winform前端开发之强大的自定义控件库

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  3. 二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  4. jquery中ajax 从前端到后端 完整过程解析

    几个原则: 1.get方式访问浏览器时,常加参数缘由: GET访问浏览器是等幂的,就是一个相同的URL只有一个结果[相同是指整个URL字符串完全匹配],所以第二次访问的时候如果 URL字符串没变化,浏 ...

  5. Web 开发人员和设计师必读文章推荐【系列二十九】

    <Web 前端开发精华文章推荐>2014年第8期(总第29期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  7. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  8. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  9. Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

随机推荐

  1. 搭建第一个django项目

    django是python做web最为强大和全能的后端框架,不会django的python如一条咸鱼... 所以开始学习django框架. 首选得在python中下载django 下载命令: pip ...

  2. 使用MQTTBox连接阿里云平台

    这篇只做一个简单的介绍,和上一篇没有根本的区别.只是就两个客户端的差异介绍一下. 一.需要参考的内容: 使用MQTT.fx连接阿里云平台: https://www.cnblogs.com/mhtc/p ...

  3. 制作手风琴效果时发现新大陆，好吧，其实是一个bug

    手风琴效果代码: <!DOCTYPE html> <html>    <head>         <meta charset="utf-8&quo ...

  4. Python爬虫老是被封的解决方法【面试必问】

    在爬取的过程中难免发生 ip 被封和 403 错误等等,这都是网站检测出你是爬虫而进行反爬措施,在这里为大家总结一下 Python 爬虫动态 ip 代理防止被封的方法. PS:另外很多人在学习Pyth ...

  5. python基础（二）---第一个程序

    1. 第一个程序 1.1 Hello Python书写步骤 步骤一:新建文本文档文件,修改名称为hello.py 步骤二:使用记事本打开文件,书写程序内容如下: 步骤三:打开命令行,输入执行指令:py ...

  6. spring整合web项目

    Web项目如何初始化SpringIOC容器 :思路:当服务启动时(tomcat),通过监听器将SpringIOC容器初始化一次(该监听器 spring-web.jar已经提供),web项目启动时 ,会 ...

  7. 2019年7月22日A股科创板开板首日行情思考

    2019年7月22日A股科创板开板首日行情思考 原因:2019科创板开板交易 盘面:科创板交易活跃,首批上市25只股票大涨,最高达5倍涨幅:主板交投低迷,量能萎缩,大部分股票下跌. 操作:加仓 西安银 ...

  8. Redis数据的导出和导入（dump和load方式）

    迁移redis数据一般有如下3种方式: 第三方工具redis-dump,redis-load aof机制,需要开启aof功能 rdb存储机制 这里介绍第一种方式,通过redis-dump导出数据,再通 ...

  9. 安装scikit-learn

    首先到官网下载安装 python ,之后下载setuptools 进行安装. 'python' 不是内部或外部命令  可运行 set PATH=%PATH%;C:\Python34 安装完成之后,运行 ...

  10. 端口打开和关闭do while

    ;Author : Bing Song ;// ;Usage: modify “logfile" according to actual drictory getdir logdir #获取 ...