ajax省市联动案例,AJAX案例四:省市联动(示例代码)
1
2
3
4
5
6
7
8
My JSP \'ajax5.jsp\' starting page
9
10
11
12
13
14
15
18
19 functioncreateXMLHttpRequest() {20 try{21 return newXMLHttpRequest();//大多数浏览器
22 }catch(e) {23 try{24 returnActvieXObject("Msxml2.XMLHTTP");//IE6.0
25 }catch(e) {26 try{27 returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
28 }catch(e) {29 alert("用的是什么浏览器啊?");30 throwe;31 }32 }33 }34 }35 /*
36 * 1. 在文档加载完毕时发送请求,得到所有省份名称,显示在中37 * 2. 在选择了新的省份时,发送请求(参数为省名称),得到xml文档,即元素38 * 解析xml文档,得到其中所有的,再得到每个元素的内容,即市名,使用市名生成,插入到元素中39 */
40
41 window.οnlοad= function() {42 /*
43 ajax四步,请求ProvinceServlet,得到所有省份名称44 使用每个省份名称创建一个元素,添加到中45 */
46 varxmlHttp=createXMLHttpRequest();47 xmlHttp.open("GET","",true);48 xmlHttp.send(null);49 xmlHttp.onreadystatechange= function() {50 if(xmlHttp.readyState== 4 &&xmlHttp.status== 200) {51 //获取服务器的响应
52 vartext=xmlHttp.responseText;53 //使用逗号分隔它,得到数组
54 vararr=text.split(",");55 //循环遍历每个省份名称,每个名称生成一个option对象,添加到中
56 for(vari= 0; i
58 op.value=arr[i];//设置op的实际值为当前的省份名称
59 vartextNode=document.createTextNode(arr[i]);//创建文本节点
60 op.appendChild(textNode);//把文本子节点添加到op元素中,指定其显示值
61
62 document.getElementById("p").appendChild(op);63 }64 }65 };66
67
68 /*
69 第二件事情:给添加改变监听70 使用选择的省份名称请求CityServlet,得到元素(xml元素)!!!71 获取元素中所有的元素,遍历之!获取每个的文本内容,即市名称72 使用每个市名称创建元素添加到73 */
74 varproSelect=document.getElementById("p");75 proSelect.οnchange= function() {76 varxmlHttp=createXMLHttpRequest();77 xmlHttp.open("POST","",true);78 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");79 xmlHttp.send("pname=" +proSelect.value);//把下拉列表中选择的值发送给服务器!
80 xmlHttp.onreadystatechange= function() {81 if(xmlHttp.readyState== 4 &&xmlHttp.status== 200) {82 /*
83 把select中的所有option移除(除了请选择)84 */
85 varcitySelect=document.getElementById("c");86 //获取其所有子元素
87 varoptionEleList=citySelect.getElementsByTagName("option");88 //循环遍历每个option元素,然后在citySelect中移除
89 while(optionEleList.length> 1) {//子元素的个数如果大于1就循环,等于1就不循环了!
90 citySelect.removeChild(optionEleList[1]);//总是删除1下标,因为1删除了,2就变成1了!
91 }92
93
94 vardoc=xmlHttp.responseXML;95 //得到所有名为city的元素
96 varcityEleList=doc.getElementsByTagName("city");97 //循环遍历每个city元素
98 for(vari= 0; i
100 varcityName;101 //获取市名称
102 if(window.addEventListener) {//处理浏览器的差异
103 cityName=cityEle.textContent;//支持FireFox等浏览器
104 }else{105 cityName=cityEle.text;//支持IE
106 }107
108 //使用市名称创建option元素,添加到中
109 varop=document.createElement("option");110 op.value=cityName;111 //创建文本节点
112 vartextNode=document.createTextNode(cityName);113 op.appendChild(textNode);//把文本节点追加到op元素中
114
115 //把op添加到元素中
116 citySelect.appendChild(op);117 }118 }119 };120 };121 };122
123
124
125
126
省市联动
127
128 ===请选择省===
129
130
131
132 ===请选择市===
133
134
135
ajax省市联动案例,AJAX案例四:省市联动(示例代码)相关推荐
- spring boot +ajax上传文件前后端分离完整实现示例代码
1.案例场景 此处,我这里需要前端实现上传身份证OCR识别证件号码. 2.前端实现方式 2.1页面按钮 <div class="title-icon"></div ...
- ajax 同步异步true,async: false 实现AJAX同步请求 ( $.ajax同步/异步(async:false/true) )(示例代码)...
虽然说ajax用来执行异步请求的比较多,但有时还是存在需要同步执行的情况的. 比如:我需要通过ajax取执行请求以返回一个值,这个值在ajax后面是需要使用到的,这时就不能用异步请求了.这时候就需要使 ...
- java ajax html复选框,HTMLjavaSkcriptCSSjQueryajax(九)(示例代码)
一.HTML 1.单选按钮 Male Female 2.复选框 I have a Car 3.下拉列表 VoloFita 如果设置某项选定直接 fem 4.设置文本域 创建按钮 5. R ...
- 数据库下午怎么插入_2020/3/25 下午 数据库第四章 自连接(示例代码)
自连接 查询与"数据结构"学分相同的课程的课程名和学分 SELECT C2.Cname,C1.Credit FROM Course C1 JOIN Course C2 ON C1. ...
- 计算机科学丛书数据库系统,计算机科学丛书:数据库系统概念 读书笔记(十四)--事务(示例代码)...
构成单一逻辑工作单元的操作集合称作事务(transaction). 即使有故障,数据库系统也必须保证事务的正确执行--要么执行整个事务,要么属于该事务的操作一个也不执行. 1. 事务概念 事务通常由高 ...
- ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)
AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术. AJAX技术是纯客户端技术,任何客户端框架(如:M ...
- Ajax入门(附学习案例)
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: XHTML和CSS的基于标准的表示 ...
- php ajax城市联动,php+ajax 城市联动
jquery-1.8.0.min.js 自己下载 /* 表结构 -- -- 表的结构 `web_city` -- CREATE TABLE IF NOT EXISTS `web_city` ( `i ...
- php下拉列表 二级 联动,PHP+Ajax实现二级联动下拉菜单!
正文 字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈 数据库 .................................... ...
- php教育网站设计案例_南广东区优秀网站设计案例集锦第四期
南广东优秀网站设计案例集锦第四期 第一名:吴嘉文 佛山资深设计师 01 个人介绍 亚里士多德曾经说过:"我们每一个人都是由自己一再重复的行为所铸造的.因而优秀不是一种行为,而是一种习惯.&q ...
最新文章
- PacificA 一致性协议解读
- 秒杀系统设计的 5 个要点:前端三板斧+后端两条路!
- python 将YOLO(txt)格式的标注数据批量转换为PascalVOC(XML)格式的标注数据
- Graphpad Prism 9绘制子列图与柱状图
- PAT乙类1010之1010 一元多项式求导
- python网页结构分析_Python爬虫基础之网页组成解析
- 《LoadRunner性能测试巧匠训练营》——1.4 性能测试分类详解
- zabbix登陆拒绝报没有权限
- pycharm debug 单步调试太卡太慢解决方案
- 配置“终端服务器授权”激活许可证服务器(转)
- 如何使用命令提示符查找和打开文件
- 【秋招内推】近期互联网公司秋招内推合集
- 常见混沌系统—Lorenz模型
- 神经网络学习(3)————BP神经网络以及python实现
- 机器学习面试题 (一)
- C++位运算:与,或,非( , | , !)
- python中串口通信的步骤及实现
- 计算机物联网知识,计算机科学技术对物联网的5大作用分析
- linux 内核 风扇,Linux CPU温度,风扇监测lm-sensors
- 接触角测量方法的发展