第五例:省市联动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


相关文章
|
XML 前端开发 数据格式
第五例:省市联动1|学习笔记
快速学习第五例:省市联动1
第五例:省市联动1|学习笔记
|
XML 前端开发 数据格式
第五例:省市联动1| 学习笔记
快速学习第五例:省市联动1
|
XML 前端开发 数据格式
第五例:省市联动2| 学习笔记
快速学习第五例:省市联动2
第五例:省市联动2| 学习笔记
|
XML 前端开发 数据格式
第五例:省市联动2|快速学习
快速学习第五例:省市联动2
142 0
第五例:省市联动2|快速学习
|
前端开发 JavaScript PHP
php开发实战分析(10):城市区县联动筛选
php开发实战分析(10):城市区县联动筛选
136 1
|
前端开发 JavaScript 定位技术
【云图】如何设置微信里的全国实体店地图?
原文:【云图】如何设置微信里的全国实体店地图? 商家福利!如何提高微信公众平台的粉丝数?如何更好地与粉丝互动?如何为客户提供更好的网络服务? 答案是,为自己的微信公众平台,添加地图功能。有了地图,您的用户能更好更快地找到您实体店的地址,快捷地查询路线。
1458 0
|
Web App开发 JavaScript 前端开发
【云图】如何设置支付宝里的家乐福全国连锁店地图?
原文:【云图】如何设置支付宝里的家乐福全国连锁店地图?  摘要:本文详细讲解了,如何设置支付宝服务窗。商家如何将自己的全国连锁店放置到云图上,并且在支付宝服务窗中提供地图查询功能。本文所包含的地图服务为: 1、按城市查询门店地址; 2、列表模式和地图模式的方便切换; 3、调起打电话服务,更快与客户直接接触; 4、地图定位,导航,查周边。
1339 0
|
9月前
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
394 0

热门文章

最新文章