黑马day17 ajax实现二级联动

手工方式实现二级联动的效果:jsp页面:>=>====></html>

jsp页面中的js文件… 这里实现二级联动的主要步骤:

window.onload=xhr=ajaxFunction();//2.监听xhr.onreadystatechange=(xhr.readyState==4){if(xhr.status==200){var docXml=xhr.responseXML;//解析docXml的内容var provinceXmlElements=docXml.getElementsByTagName(“province”);//遍历所有的provincefor(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(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){//解析其中的cityvar cityXmlElements=provinceXmlElement.getElementsByTagName(“city”);//遍历cityfor(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);}{ var xmlHttp; try{ // Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=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 javaimport javaimport javaximport javaximport javaximport javaxpublic 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类型的字符串((((((((((((((((((((((“</china>”);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}}

4.效果:

,遇见你,是我一生的幸运;爱上你,

黑马day17 ajax实现二级联动

相关文章:

你感兴趣的文章:

标签云: