用 jsp 写的 ajax 技术实现省市县等 n 级联动

来源：互联网发布：下载主题中心软件编辑：程序博客网时间：2024/04/28 14:16

参考网上一些例子，以及看的一些视频，使用 ajax 技术写的第一个实例。

功能要求：选择省，出现相应的市；再选择市，出现相应的学校……（PS. 不管多少级联动，明白第一级联动的原理后，后面的 n 级联动都是一样的）

前端JSP：

<div class="right"><h3>请输入教师信息：</h3><form action="LogingTeacher" enctype="multipart/form-data" method="post" ><span style="white-space:pre"></span>// 提交到 LoginSerletTeacher.java 程序中<ul><li>省份：<select id="province" name="province" onchange="getCities(province,city)"><option value="">--省--</option><%for(int j = 0; j < list.size(); j ++){Province province = (Province)list.get(j) ;%><option value="<%=province.getId()%>"><%=province.getName()%></option><%}%></select></li><li>    市：<select id="city" name="city" onchange="getSchools(city,school)"><option value="">--市--</option></select></li><li>学校：<select id="school" name="school" onchange="getColleges(school,collegeid)"><option value="">--学校--</option></select></li><li>学院：<select id="collegeid" name="collegeid"><option value="">--学院--</option></select></li><li>姓名：<input type="text" name="teacherName"/></li><li>性别：<input type="radio" value="1" name="sex" checked="checked" /> 男<input type="radio" value="2" name="sex" /> 女<input type="radio" value="3" name="sex" /> 保密</li><li>头像：<input type="file" name="userHead" /></li><li>职称：<input type="radio" name="title" value="1" /> 院士<input type="radio" name="title" value="2" /> 教授<input type="radio" name="title" value="3" /> 副教授<input type="radio" name="title" value="4" /> 讲师</li><li> 简介：  <br /><textarea cols="50" rows="12"></textarea></li><input type="submit" value="提交" class="submit" /></ul></form></div>

js函数：（一级联动和其它所有联动都一样的）

var myXmlHttpRequest = getXmlHttpObject() ;function getCities(parent,obj) {var data = parent.value ;myXmlHttpRequest.open("GET", "CitiesListServlet?provinceId="+data, false) ;// 使用 get 方法，将 provinceId 的值传到 CitiesListServlet.java <span style="white-space:pre"></span>   // 然后进行对数据的读取 , 这个很简单就不贴代码了 myXmlHttpRequest.onreadystatechange = function(){chuli(obj) ;}myXmlHttpRequest.send(null) ;}// 获取 ajax 引擎function getXmlHttpObject() {var xmlHttpRequest = false ;if(window.XMLHttpRequest){xmlHttpRequest = new XMLHttpRequest() ;if(xmlHttpRequest.overrideMimeType){xmlHttpRequest.overrideMimeType("text/xml") ;}}else {if(window.ActiveXObject){try{xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP") ;}catch(e) {try{xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP") ; }catch(e){}}}}return xmlHttpRequest ;}function chuli(obj) {if(myXmlHttpRequest.readyState == 4) {if(myXmlHttpRequest.status == 200){//window.alert(myXmlHttpRequest.responseXML) ;var xmlDoc = myXmlHttpRequest.responseXML.documentElement ;// 获得返回的 xml 文档var xSel = xmlDoc.getElementsByTagName('select') ;// 获得 xml 文档中所有的 <select> 标记var select_root = document.getElementById(obj.id) ;// 获得网页中的第二个下拉框select_root.options.length = 0 ;// 长度清零// 添加 " --市-- "var cityOption = document.createElement("option") ;cityOption.innerText = "--市--" ;select_root.appendChild(cityOption) ;for(var i = 0; i < xSel.length; i ++) {var xValue = xSel[i].childNodes[0].firstChild.nodeValue;  var xText = xSel[i].childNodes[1].firstChild.nodeValue ;var option = new Option(xText, xValue) ;try{select_root.add(option) ;<span style="white-space:pre"></span>// 将获取到的 option 值赋给 select }catch(e){}}// 排序sortOptions(select_root) ;<span style="white-space:pre"></span>// sortOptions() 对select 中的所有的Option进行排序

<span style="white-space:pre"></span>// 有关 sortOptions() 的写法，参照我写的另一篇文章}else {alert("不能得到市信息"+req.statusText) ;}}}

0 0