新建模板

》完成基本的结构

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><select name="pro" id="pro"><option value="">-省份-</option>
</select><select name="city" id="city"><option value="">-城市-</option>
</select><select name="area" id="area"><option value="">-区域-</option>
</select></body>
</html>

导入jquery

》动态的加载静态文件

下一步，需要测一下，jquery导入成功了没有

需要可以正常访问这个页面

配置路由

视图

试试jquery能否生效

测试

jquery成功加载

-----主逻辑开始----

思考，如何展现所有的省份？

页面加载后，发一个ajax请求

让后端查询有哪些省份

后端提供数据给前端

发ajax拿省数据

》完成格式

实现 /one/get_pro/ 的回应

》目的是回应前端的请求，给他一个响应

》路由

》视图逻辑

》视图的详情

如何拿到所有的省级信息？？

根据数据表的结构，只要pid_id为空，就是省级地名

》测试视图的回应是否可以送到前端

》发送查询的结果，结果失败

自己处理数据

因为queryset 不是标准数据类型

传送时会有问题

所以，我们要把需要的数据，处理为python标准数据类型

分析了页面

了解了前端的需求

所以，自己造数据，给前端

》我们数据太多了

[<>,<>,<>]

可以考虑处理为

[(id，name),(),()]

》代码

引入JsonResponse

可以帮我们把python转json字符串

》效果相当于

把数据处理为json数据，同时再处理为HttpResponse数据

前端收到的效果：

》数据成功送到了前端

前端继续

前端目标

塞option

》有用的数据

遍历数组，数据中的成员又是一个数据

》遍历

》拿id，拿name，拼option标签

目标：

拼好后的内容

最终实现

下一步，如何实现，点谁取谁的id

给select标签添加一个change事件

事件的匿免函数中

this，就是发生变化的那个option

通过

可以拿到value值的

有了 value值，就可以去查找这个城市对应的子级城市了

前端再发请求

配置路由

城市视图

结果

》后面的流程就和省级是一样的了

复习列表生成式

城市视图完成

django-多级联动课堂版0912相关推荐

二级联动三级联动多级联动无限级联动下拉列表或菜单专题
二级联动三级联动多级联动无限级联动下拉列表或菜单专题三维数组数据源 A - 请选择 -北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南 ...
java 下拉多级联动头像裁剪调用摄像头 SpringMVC mybatis SSM
获取[下载地址] QQ 313596790 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手把手教开发一个模块,快速 ...
[译]在启用浏览器功能的INFOPATH表单中实现基于SQL SERVER的多级联动的下拉式列表...
翻译:实现多级联动的下拉式列表原文:http://blogs.msdn.com/infopath/archive/2006/10/12/cascading-dropdowns-in-browser- ...
多级联动下拉菜单插件：jquery.cxselect.js
话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...
[多级联动下拉选择框]和[Tree to Tree]续——让他们可以设置默认值
这两个东东实际上是我现在所做公司的项目的一个小应用,前两天发布的时候并不能设置他们的默认值(初始值),现在都加上了. 多级联动已经封装为.net控件,有一个SelectedValue属性表示当前选择的 ...
yii2地址多级联动
<div> 查看地区:<select class="region" name="region[]"> ...
excel图表交互联动_如何使用高大上的多级联动交互式图表来分析人员结构？
关注[新精英充电站]能力提升看得见! 众所周知,Excel中的图表是分析数据最重要一枚利器.但一般我们分析数据时使用的图表都是静态的,一个图表只能展示一个数据维度的情况,如果需要展示的数据有多个维度, ...
native封装卡片 react_自己动手封装一个React Native多级联动
背景肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封 ...
picker封装 uniapp_uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...

django-多级联动课堂版0912

新建模板

导入jquery

配置路由

视图

测试

-----主逻辑开始----

思考，如何展现所有的省份？

发ajax拿省数据

实现 /one/get_pro/ 的回应

自己处理数据

引入JsonResponse

前端目标

遍历数组，数据中的成员又是一个数据

最终实现

下一步，如何实现，点谁取谁的id

前端再发请求

配置路由

城市视图

复习列表生成式

城市视图完成

django-多级联动课堂版0912相关推荐

最新文章

热门文章