一、知识点

1.jquery的ajax请求写法

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

二、实例

1. app1/views.py

  1. from django.shortcuts import render
  2. from django.http import HttpResponse,JsonResponse
  3. from project1.settings import MEDIA_ROOT #导入上传文件保存路径 或 from django.conf import settings
  4. from app1.models import PicTest,AreaInfo #导入图片模型类
  6. # /index
  7. def index(request):
  8. 	return render(request,'app1/index.html')
  10. # /areas 省市下拉联动展示页
  11. def areas(request):
  12. 	return render(request,'app1/areas.html')
  14. # /prov 处理ajax请求，返回所有省
  15. def prov(request):
  16. 	areas=AreaInfo.objects.filter(aParent__isnull=True)
  17. 	prov=[]
  18. 	for p in areas:
  19. 		prov.append((p.id,p.atitle))
  20. 	return JsonResponse({'data':prov})
  22. #/city
  23. def city(request, pid):
  24.     '''获取pid的下级地区的信息'''
  25.     # 1.获取pid对应地区的下级地区
  27. 	#获取方法1
  28.     # area = AreaInfo.objects.get(id=pid)
  29.     # areas = area.areainfo_set.all()
  31.     #获取方法2
  32.     areas = AreaInfo.objects.filter(aParent__id=pid)
  34.     # 2.变量areas并拼接出json数据：atitle id
  35.     areas_list = []
  36.     for area in areas:
  37.         areas_list.append((area.id, area.atitle))
  39.     # 3.返回数据
  40.     return JsonResponse({'data': areas_list})

2. templates/app1/areas.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>下拉表-省市联动</title>
  5. </head>
  6. {% load static %}
  7. <!-- <script src="{% static 'js/jquery.js' %}"></script> -->
  9. <script src="/static/js/jquery.js"></script>
  10. <script>
  11. 	$(function(){
  12. 		$.get('/prov',function(data){
  13. 			res=data.data //【1】返回的数据
  14. 			prov=$('#prov') //【2】得到省份的DOM位置
  16. 			/*//【方法1】循环处理get请求返回的数据
  17. 			for (i =0;  i<res.length; i++) {
  18. 				id=res[i][0] //【1】得到返回数据的ID
  19. 				title=res[i][1] //【2】得到返回的标题
  20. 				//【3】拼接option字段
  21. 				option_str='<option value="'+id + '">'+ title+ '</option>'
  22. 				prov.append(option_str) //【4】把数据逐个添加到省的下拉列表中
  23. 			}*/
  25. 			//【方法2】循环处理get请求返回的数据
  26. 		$.each(res,function(index,item){
  27. 			id=item[0]
  28. 			title=item[1]
  29. 			option_str='<option value="'+id + '">'+ title+ '</option>'
  30. 			prov.append(option_str)
  31. 		})
  33. 		 // 绑定prov下拉列表框的change事件，获取省下面的市的信息
  34.             $('#prov').change(function () {
  35.                 // 发起一个ajax请求 /city，获取省下面市级地区的信息
  36.                 // 获取点击省的id
  37.                 prov_id=$(this).val()
  38.                 $.get('/city'+prov_id, function (data) {
  39.                     // 获取返回的json数据
  40.                     res = data.data
  41.                     // 获取city下拉列表框
  42.                     city = $('#city')
  43.                     // 清空city下拉列表框
  44.                     city.empty().append('<option>---请选择市---</option>')
  45.                     // 获取dis下拉列表框
  46.                     dis = $('#dis')
  47.                     // 清空dis下拉列表框
  48.                     dis.empty().append('<option>---请选择县---</option>')
  49.                     // 变量res数组，获取每一个元素:[地区id, 地区标题]
  50.                     // 遍历取值添加到city下拉列表框中
  51.                     $.each(res, function (index, item) {
  52.                         id = item[0]
  53.                         atitle = item[1]
  54.                         option_str = '<option value="'+id + '">'+ atitle+ '</option>'
  55.                         // 向city下拉列表框中追加元素
  56.                         city.append(option_str)
  57.                     })
  58.                 })
  59.             })
  61.              // 绑定city下拉列表框的change事件，获取市下面的县的信息
  62.             $('#city').change(function () {
  63.                 // 发起一个ajax请求 /dis，获取市下面县级地区的信息
  64.                 // 获取点击市的id
  65.                 city_id=$(this).val()
  66.                 $.get('/dis'+city_id, function (data) {
  67.                     // 获取返回的json数据
  68.                     res = data.data
  69.                     // 获取dis下拉列表框
  70.                     dis = $('#dis')
  71.                     // 清空dis下拉列表框
  72.                     dis.empty().append('<option>---请选择县---</option>')
  73.                     // 变量res数组，获取每一个元素:[地区id, 地区标题]
  74.                     // 遍历取值添加到dis下拉列表框中
  75.                     $.each(res, function (index, item) {
  76.                         id = item[0]
  77.                         atitle = item[1]
  78.                         option_str = '<option value="'+id + '">'+ atitle+ '</option>'
  79.                         // 向dis下拉列表框中追加元素
  80.                         dis.append(option_str)
  81.                     })
  82.                 })
  83.                 })
  84. 	})
  85. 	})
  86. </script>
  87. <body>
  89. 	<select id='prov'>
  90. 		<option>下拉选择省</option>
  91. 	</select>
  92. 	<select id='city'>
  93. 		<option>下拉选择市</option>
  94. 	</select>
  95. 	<select id='dis'>
  96. 		<option>下拉选择县</option>
  97. 	</select>
  99. </body>
  100. </html>

3. app1/urls.py

  1. from django.contrib import admin
  2. from django.urls import path,re_path
  3. from app1 import views
  5. urlpatterns = [
  6.     path('index/', views.index),
  8.     path('areas', views.areas), # 省市县下拉选择联动
  9.     path('prov/',views.prov), # ajax请求处理页，返回所有省
  10.     path('city<pid>',views.city), # ajax请求处理页，返回所有市
  11.     path('dis<pid>',views.city), # ajax请求处理页，返回所有县，因为和市所用过程相同，所以使用同一个处理函数city
  12. ]

附件：setting.py设置

  1. LANGUAGE_CODE = 'zh-hans'#en-us
  2. TIME_ZONE = 'Asia/Shanghai'#UTC
  3. USE_I18N = True
  4. USE_L10N = True
  5. USE_TZ = True
  7. # 静态Url设置
  8. STATIC_URL = '/static/'
  9. # 静态文件设置
  10. STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
  12. # 设置上传文件的保存目录
  13. 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. dfs(学姐的红包）

    链接:https://ac.nowcoder.com/acm/contest/3402/I    盼啊,盼啊,伴随着时钟的敲响,我们即将迎来了美好的传统佳节-春节.为了给新年增添浓浓节日气息,师弟师妹 ...

  2. Redis搭建一主一从及哨兵模式（二）

    废话不多说,直接进入正题. 一.主从搭建 进入redis的根目录,拷贝一份redis.conf,最初的一份留作模版: ①cp  redis.conf redis.conf.template ②vim ...

  3. P1478

    昨天花一下午时间,把 codeblocks 代码 highlight 改了改,感觉还不错 :) 咳咳.还是说题吧. 这道题利用贪心思想,先去除所有够不着的,然后按使用力气 $ y_i $ 从小到大排序 ...

  4. 「BJWC2010」模板严格次小生成树

    题目描述 小 \(C\) 最近学了很多最小生成树的算法,\(Prim\) 算法.\(Kruskal\) 算法.消圈算法等等.正当小\(C\)洋洋得意之时,小\(P\)又来泼小\(C\)冷水了.小\(P ...

  5. express 应用创建及app.js详解

    #1 express 应用创建 1.安装node.js (自行百度) 2.npm install express -g 3.全局安装express生成器 express-generator npm i ...

  6. windows之杀死端口

    提示: 查询端口 查询pid 杀死任务 通过 cmd 进入控制台: 查询端口: netstat -aon|findstr 1111 查询pid下的任务: tasklist|findstr 6616 杀 ...

  7. table 实现向下滑动首行冻结，向右滑动左列冻结

    <html> <head> <meta charset="utf-8"> <title>测试</title> <M ...

  8. 「NOI2006」最大获利

    「NOI2006」最大获利 传送门 最小割. 对于每一组用户群 \(A_i, B_i, C_i\) ,连边 $S \to A_i, S \to B_i, $ 容量为成本,还有 \(i \to T\) ...

  9. uniGUI之UniSyntaxEdit(24)

    UniSyntaxEdit1语法高亮显示控件,主要属性Language,它是  多行 1]Language 语言 2]执行 FDquery1.Open(UniSyntaxEdit1.Lines.Tex ...

  10. ethtool命令使用

    [root@localhost ~]# ethtool -s eth0 speed 100 duplex full #设置网口的speed和duplex # ethtool eth0Settings ...