宝哥软件园

js使用可扩展标记语言数据载体实现城市省份二级联动效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

本文实例为大家分享了使用可扩展标记语言数据载体实现城市省份二级联动的具体代码,供大家参考,具体内容如下

首先写好前台页面testProvince.jsp,将请求通过打开、发送发送到服务器

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath();字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/;% !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' rel='外部无跟随'标题二级联动/title meta http-equiv=' pragma ' content=' no-cache ' meta http-equiv=' cache-control ' content=' no-cache ' meta http-equiv=' expires ' content=' 0 ' meta http-equiv=' keywords ' content=' keywords 1,keywords 2,keywords 3 ' meta http-equiv=' description ' content='这是我的页面样式类型=' text/CSS '选择{ width :111 px}/样式/头体选择id='provinceID '选项选择省份/option选项湖南/option选项广东/option/选择选择id='cityID '选项选择城市/选项/选择/正文脚本类型='text/javascript' //创建创建交互式、快速动态网页应用的网页开发技术对象函数createAJax(){ var AJax=null;请尝试{ Ajax=新的activexObject('微软。xmlhttp’);} catch(e){ try { Ajax=new XMlhttprequest();}catch(e1){ alert('请更换浏览器');} }返回ajax}/script脚本类型=' text/JavaScript '文档。getelementbyid(' ProvinceId ').onchange=function(){ //清空城市除了第一项var city elem=文档。getelementbyid(' city id ');城市elem。选项。长度=1;//获取选中的省份定义变量省份=this.value//进行编码处理省=encodeURI(省);如果('选择省份!=省份){ var AJax=createAJax();//提交方式为获取var方法=' GET//提交路径为小型应用程序路径var URL=' $ {页面上下文。请求。上下文路径}/ProvinCeservlet?时间='新日期()。' getTime()'省份='省份;//准备发送异步请求ajax.open(方法、网址);//由于是得到请求,所以不需要设置请求头//发送请求Ajax。发送(null);//监听服务器响应状态的变化Ajax。onreadystatechange=function(){//响应状态为四表示创建交互式、快速动态网页应用的网页开发技术已经完全接受到服务器的数据了if(ajax.readyState==4){ //接收到的数据正常if(ajax.status==200){ //获取服务器传来的超文本标记语言数据var xmlDocument=Ajax。responsexml//进行数字正射影像图操作解析xml /解析可扩展标记语言数据var city s=xmldocument。getelementsbytagname(' city ');for(var I=0;一、城市长度;i ){ //获取可扩展标记语言中的值:不能用innerHTML,要用节点值var city=城市s[I]。第一个孩子。节点值;//创建选项var OptElement=文档。create element(' option ');optElement.innerHTML=城市;//获取城市var城市elems=文档。getelementbyid(' city id ');城市电梯。append child(OptElement);} } } } } } } } }/script/html然后在后台省份servlet中通过得到方式获取请求,将返回的数据以o(输出)流的方式发送出去,上面代码的ajax.responseXML获取输出的数据,并进行数字正射影像图操作

公共类provinces servlet扩展httpersvlet { @ Override protected void DoGet(httpersvleetrequest,HttpServletResponse resp)引发ServletException,IOException { req。setcharacter encoding(' utf-8 ');resp。setcharacter encoding(' utf-8 ');字符串省份=req.getParameter('省份');//重新编码省份=新字符串(省份。getBytes('ISO-8859-1 ',' utf-8 ');//设置格式为XML响应。SetContentType(' text/XML;charset=utf-8 ');//获取字符输出流PrintWriter pw=resp。getwriter();//拼接可扩展标记语言头pw.write('?可扩展标记语言版本='1.0 '编码='UTF-8 '?);pw。书写(' city s ');如果('湖南。等于(省)){ pw.write('city长沙/city’);pw.write('city株洲/city’);pw.write('city湘潭/city’);pw.write('city岳阳/city’);}else if('广东。等于(省)){ pw.write('city广州/city’);pw.write('city深圳/city’);pw.write('city中山/city’);} pw。写('/city s ');pw。flush();pw。close();} } 运行结果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+