黑马day17 ajax&实现二级联动
2015-07-13 10:50
555 查看
手工方式实现二级联动的效果:
jsp页面:<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>级联菜单</title> <script type="text/javascript" src="xmlfile.js"> </script> </head> <body> <select id="province" name="province"> <option value="">请选择....</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> </html>
jsp页面中的js文件…
这里实现二级联动的主要步骤:
window.onload=function(){ //1.获取对象 var xhr=ajaxFunction(); //2.监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ var docXml=xhr.responseXML; //解析docXml的内容 var provinceXmlElements=docXml.getElementsByTagName("province"); //遍历所有的province for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement=provinceXmlElements[i]; var provinceXmlValue=provinceXmlElement.getAttribute("name"); //<option value="">请选择....</option> var option=document.createElement("option"); option.setAttribute("value",provinceXmlValue); var text=document.createTextNode(provinceXmlValue); option.appendChild(text);//挂接节点 var provinceDocElement=document.getElementById("province"); provinceDocElement.appendChild(option); } //当点击一个一个省份时触发一个事件 document.getElementById("province").onchange=function(){ //清空城市列表 var cityDocElement = document.getElementById("city"); var options = cityDocElement.getElementsByTagName("option"); for(var z=options.length-1;z>0;z--){ cityElement.removeChild(options[z]); } //1.页面中选中的是哪个省份 var privinceDocValue=this.value; //2.解析xml内容中所有province的信息 for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement=provinceXmlElements[i]; var provinceXmlValue=provinceXmlElement.getAttribute("name"); if(privinceDocValue==provinceXmlValue){ //解析其中的city var cityXmlElements=provinceXmlElement.getElementsByTagName("city"); //遍历city for(var j=0;j<cityXmlElements.length;j++){ var cityXmlElement=cityXmlElements[j]; var cityXmlElementValue=cityXmlElement.firstChild.nodeValue; //<option><option/> var option= document.createElement("option"); option.setAttribute("value",cityXmlElementValue); //创建一个文本节点 var text=document.createTextNode(cityXmlElementValue); option.appendChild(text); cityDocElement.appendChild(option); } } } //3.遍历所有的province的信息 } } } } //3.建立客户机和服务器的链接 xhr.open("get","../servlet/XmlFileServlet",true); //4.发送数据 xhr.send(null); } function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; }
servlet打印xml数据
如果服务器端向客户端发送的数据格式是XML格式的话,一定设置响应首部信息:”Content-Type”为”text/xml”
package app.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class XmlFileServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ***response.setContentType("text/xml;charset=utf-8");*** PrintWriter out = response.getWriter(); /* * * 如果实际开发的话,查询数据库 * * 结果集为JavaBean类型 * * 结果集为集合内容:Array、List、Map及Set等集合 * * * 现在不查询数据库,模拟查询数据库:手工方式构建XML格式 */ //手工方式构建的XML格式,实际上就是String类型的字符串 out.println("<china>"); out.println("<province name='吉林省'>"); out.println("<city>长春</city>"); out.println("<city>吉林市</city>"); out.println("<city>四平</city>"); out.println("<city>松原</city>"); out.println("<city>通化</city>"); out.println("</province>"); out.println("<province name='辽宁省'>"); out.println("<city>沈阳</city>"); out.println("<city>大连</city>"); out.println("<city>鞍山</city>"); out.println("<city>抚顺</city>"); out.println("<city>铁岭</city>"); out.println("</province>"); out.println("<province name='山东省'>"); out.println("<city>济南</city>"); out.println("<city>青岛</city>"); out.println("<city>威海</city>"); out.println("<city>烟台</city>"); out.println("<city>潍坊</city>"); out.println("</province>"); out.println("</china>"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
4.效果:
相关文章推荐
- 常用小代码——串口初始化
- XML DOM操作,适用目前流行的浏览器
- Nginx介绍 分类: Nginx 服务器搭建 2015-07-13 10:50 19人阅读 评论(0) 收藏
- (转)ThinkPHP Where 条件中使用表达式
- [视频]Win10 Mobile预览版10166部分更新内容:通知中心新手势操作
- 正式开始android学习
- NTFS For Mac其它功能解析
- 用C#将图片保存至Oracle BLOB字段中的方法
- GRE写作必备句型
- 移植Linux3.4.2版本内核到mini2440(一)
- JavaJdbc ORA-12505错误解决方法
- Spring2.5.6 和Spring3.0.5所有jar下载地址
- Android 调用已安装市场,进行软件评分的功能实现
- Oracle not in子连接查询不到值的问题(not in 不能查询null数据)
- C++ 字符串编程训练2
- MyEclipse常用快捷键
- UIAlertController
- 2012年5月SAT香港真题解析
- [LeetCode][Java] Count and Say
- Php代码控制错误提示级别