第五例:省市联动1|学习笔记

简介: 快速学习第五例:省市联动1

开发者学堂课程【Ajax:第五例:省市联动1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/31

第五例:省市联动1


省市联动

1、页面

<select name =”province>

<option>===请选择省份===</option>

</select>

<select name=”city>

<option>===请选择城市===</option>

</select>

在页面打开就应该把所有省加载出来。

 

2、ProvinServlet

●ProvinceServlet:当页面加载完毕之后马上请求这个servlet

>他需要加载china.xml文件,把所有的省的名称使用字符串发送给客户端。

 

3、页面的工作:

●获取这个字符串,使用逗号分隔,得到数组;

●循环遍历每个字符串(省份名称),使用每个字符串创建一个<option>元素添加到<select name=”province>这个元素中。

 

4、CityServelt

●CityServlet:当页面选择某个省时,发送请求;

●得到省份名称,加载China.xml文件,查询出该省份对应的元素对象,把这个元素转换成xml字符串,发送给客户端。

 

5、页面的工作

●把<select name=”ciyt>中的所有子元素删除,但不要删除<option>===请选择城市===</opyion>;

●得到服务器的相应结果:doc;

●获取所有的<city>子元素,循环遍历,得到<city>的内容;

●使每个<city>的内容创建一个<option>元素,添加到<select name=”ciyt>。

image.png

举例:

image.png


相关文章
|
新零售 供应链
阿里云电子签:助企业打通业务数字化“最后1公里”
阿里云电子签:助企业打通业务数字化“最后1公里”
1374 3
阿里云电子签:助企业打通业务数字化“最后1公里”
|
6月前
|
SQL 存储 前端开发
省市县三级联动的实现方案
省市县三级联动的实现方案
202 0
|
前端开发 JavaScript PHP
php开发实战分析(10):城市区县联动筛选
php开发实战分析(10):城市区县联动筛选
112 1
|
小程序 JavaScript 定位技术
微信小程序实现一键查询全国快递物流地图轨迹
通过本教程,用户可以输入快递单号,点击查询按钮,然后跳转到显示页面,在该页面上展示物流轨迹的地图信息。这个功能可以方便用户了解快递的实时位置和运输轨迹,提升用户体验和便利性。你可以根据实际需求进行扩展和优化,使其更适合你的小程序应用。
377 0
|
XML 前端开发 数据格式
第五例:省市联动2| 学习笔记
快速学习第五例:省市联动2
第五例:省市联动2| 学习笔记
|
XML 前端开发 数据格式
第五例:省市联动1|学习笔记
快速学习第五例:省市联动1
第五例:省市联动1|学习笔记
|
XML 前端开发 数据格式
第五例:省市联动2|快速学习
快速学习第五例:省市联动2
118 0
第五例:省市联动2|快速学习
|
XML 前端开发 数据格式
第五例:省市联动1| 学习笔记
快速学习第五例:省市联动1
海东市平安区数字就业中心启用 蚂蚁数科提供云客服解决方案
7月22日,青海省海东市平安区数字就业中心、平安区蚂蚁服务星站揭牌启用。该中心由蚂蚁集团、阿里巴巴集团联合支持。目标将原来在一二线城市的数字就业岗位转移到本地,助力年轻人在地就业。
548 0
|
JSON JavaScript 数据可视化
DataV带你回顾春节前后全国空气质量变化
春节假期结束了,大家在与家人亲戚欢聚的同时,不知道有没有留意春节期间的空气质量呢?没留意也没关系,下面就由DataV君带大家一起回顾下春节期间的空气质量变化吧。
51579 2