Ajax制作二级联动下拉列表框
1.index.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <head> 4 <script type="text/javascript" language="javaScript"> 5 var xmlHttp = false; //全局变量,用于记录XMLHttpRequest对象 6 function createXMLHttpRequest() { 7 if(window.ActiveXObject) { //Internet Explorer时,创建XMLHttpRequest对象的方法 8 try { 9 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 10 } catch(e) { 11 try { 12 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 13 //旧版本的Internet Explorer,创建XMLHttpRequest对象 14 } catch(e) { 15 window.alert("创建XMLHttpRequest对象错误"+e); 16 } 17 } 18 } else if(window.XMLHttpRequest) { //mozilla时,创建XMLHttpRequest对象的方法 19 xmlHttp = new XMLHttpRequest(); 20 } 21 if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象 22 window.alert("创建XMLHttpRequest对象异常!"); 23 } 24 } 25 26 //下拉列表项改变时的操作 27 function proChange(objVal) { 28 createXMLHttpRequest(); //创建XMLHttpRequest对象 29 document.getElementById("city").length = 1; //根据ID获取指定元素,并赋值 30 xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数 31 var url = "/ComboTest/servlet/CityServlet?province=" + objVal; //请求的URL地址 32 xmlHttp.open("GET",url,true); 33 xmlHttp.send(null); 34 } 35 36 function cityList() { //onreadystatechange的处理函数 37 if(xmlHttp.readyState==4) { 38 if(xmlHttp.status==200) { 39 parseXML(xmlHttp.responseXML); //解析服务器返回的XML数据 40 } 41 } 42 } 43 44 //解析xml信息,以添加地市 45 function parseXML(xmlDoc) { 46 var len = xmlDoc.getElementsByTagName("city"); 47 //获取XML数据中所有的“city”元素对象集合 48 var _citySel = document.getElementById("city"); //根据ID获取页面中的select元素 49 for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项 50 var opt = document.createElement("OPTION"); //创建option对象 51 opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data; 52 //指定新创建元素的text属性值 53 opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data; 54 //指定新创建元素的value属性值 55 _citySel.add(opt); //为select元素添加option 56 } 57 } 58 </script> 59 <title>动态加载组合框</title> 60 </head> 61 <body> 62 <table align="center" border=1 width="320"> 63 <tr> 64 <td>省份:</td> 65 <td> 66 <select id="province" onchange="proChange(this.value);" style="width:85"> 67 <option value="gd">广东</option> 68 <option value="gx">广西</option> 69 <option value="hn">湖南</option> 70 <option value="hb">湖北</option> 71 <option value="ah">安徽</option> 72 </select> 73 </td> 74 </tr> 75 <tr> 76 <td>地市:</td> 77 <td> 78 <select id="city" style="width:85"> 79 <option value="">--请选择--</option> 80 </select> 81 </td> 82 </tr> 83 </table> 84 </body> 85 </html>
2.CityServlet.java
1 public class CityServlet extends HttpServlet { 2 private static final String CONTENT_TYPE = "text/xml; charset=UTF-8"; 3 //设置返回响应的ContentType 4 /** 5 *当前Servlet对象构造方法 6 */ 7 public CityServlet() { 8 super(); 9 } 10 /** 11 * 当前Servlet销毁时的操作。<br> 12 */ 13 public void destroy() { 14 super.destroy(); 15 } 16 /** 17 * 当前Servlet的doGet方法。<br> 18 * 19 * 当客户端表单的“method”类型为“get”时,调用此方法 20 * 21 * @param request客户端请求对象 22 * @param response 服务器响应对象 23 * @throws ServletException 发生ServeltException时抛出 24 * @throws IOException 发生IOException时抛出 25 */ 26 public void doGet(HttpServletRequest request, HttpServletResponse response) 27 throws ServletException, IOException { 28 response.setContentType(CONTENT_TYPE); //设置服务器响应类型 29 String province =request.getParameter("province"); 30 StringBuffer city = new StringBuffer("<citys>"); //记录返回XML串的对象 31 List list = cityInit(); //获取城市列表 32 if("gx".equals(province)) { 33 for(int i=0;i<list.size();i++) { 34 city.append("<city>"+list.get(i)+"</city>"); 35 } 36 } 37 city.append("</citys>"); 38 PrintWriter out = response.getWriter(); 39 out.print(city.toString()); 40 out.flush(); //输出流刷新 41 out.close(); //关闭输出流 42 } 43 44 /* 45 * 初始化城市 46 */ 47 public List<String> cityInit() { 48 List<String> cityList = new ArrayList<String>(); 49 //添加城市列表 50 cityList.add("南宁"); 51 cityList.add("桂林"); 52 cityList.add("北海"); 53 cityList.add("河池"); 54 cityList.add("梧州"); 55 cityList.add("玉林"); 56 return cityList; 57 } 58 59 /** 60 *当前Servelt的初始化方法. <br> 61 * 62 * @throws ServletException发生ServletExceptio时抛出 63 */ 64 public void init() throws ServletException { 65 } 66 }
3.web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="2.5" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 6 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 7 <servlet> 8 <description>This is the description of my J2EE component</description> 9 <display-name>This is the display name of my J2EE component</display-name> 10 <servlet-name>CityServlet</servlet-name> 11 <servlet-class>wen.CityServlet</servlet-class> 12 </servlet> 13 <servlet-mapping> 14 <servlet-name>CityServlet</servlet-name> 15 <url-pattern>/servlet/CityServlet</url-pattern> 16 </servlet-mapping> 17 <welcome-file-list> 18 <welcome-file>index.jsp</welcome-file> 19 </welcome-file-list> 20 </web-app>
相关推荐
基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar基于Ajax的二级联动下拉列表.rar
用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦
当二级联动要实现数据库时实读取时,比较麻烦,本例子用Ajax可以简单实现 ajax+Jsp+js+servlet
ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表
dwr实现的完整的二级下拉联动列表,里面有说明,源代码。
学习中。。。看了个文档格式的,我把它改成项目了,看着方便。
Ajax+PHP二级联动下拉列表(实现下拉联动)
ASP 实用的ajax二级联动菜单
, 用Jquery实现的三级联动下拉列表插件,压缩包内有多个不同的版本,其实现的基本原理大同小异,无非是调用方式的不同,第一个是通过读取XML构建,支持IE/firefox,chrome不支持,XML部分可以改成AJAX的方式,这样...
这几天又有人在社区问我无刷新联动和asp伪静态的问题,于是我就写了这么个小程序来给对这部分有疑问的朋友。 其中这个伪静态是本人原创作品(如有思路相同的前做则纯属意外呵呵)。试想,你可以把自己的页面地址...
ajax 我们也就讲过一个小例子,这是后来经老师指点后用老师的例子改的,希望对想实现二级联动的同学有所帮助.
JSP页面,采用ajax和json技术,实现了多个下拉框之间的二级联动,也就是选择第一个下拉框的类容之后,后面的下拉框的类容动态改变
asp.net C#,与数据库相关联的二级联动下拉选择列表。前台aspx+后台cs文件+AJAX控件,比较完整,不像网上死白COPY的那样,缺这缺那。绝对方便学习使用。
帝国CMS二级联动插件(ajax下拉列表) 帝国CMS二级联动插件(ajax下拉列表).rar
个人研究出来的ajax二-四级联动下拉列表,不明白的给我发信息或者到我blog上留言。http://blog.psnworld.cn
纯净SSM简单整合,数据库资源根据实体类自己创建。内有ssm增删改查,ajax结合jquery做下拉框,省市联动,多选框等。所有jar包都放在lib里,搭好数据库完美可用。供新手学习。
内容索引:ASP源码,Ajax相关,Ajax,联动菜单 Asp+Ajax二级联动的Select下拉菜单,当点击第一个Select的时候,根据所选值动态加载第二个Select列表框对应的内容,这样有效避免资料占用,如果需要加载的内容比较多,在...
自己jsp写的小实例,就两个jsp文件,一看就明白
中国行政区域二级联系菜单,根据上级行政区加载下级行政区列表 XML数据驱动,可自定义添加、删除,简易更新 支持回发恢复状态,已正确设定行政区可自动选定和加载各级行政区数据 其它说明: 应用网站必须存在行政...
主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下