js使用xml数据载体实现城市省份二级联动效果
程序员文章站
2022-07-06 21:17:50
本文实例为大家分享了使用xml数据载体实现城市省份二级联动的具体代码,供大家参考,具体内容如下
首先写好前台页面testprovince.jsp,将请求通过open、se...
本文实例为大家分享了使用xml数据载体实现城市省份二级联动的具体代码,供大家参考,具体内容如下
首先写好前台页面testprovince.jsp,将请求通过open、send发送到服务器
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%> <% string path = request.getcontextpath(); string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/"; %> <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <base href="<%=basepath%>" rel="external nofollow" > <title>二级联动</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="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <style type="text/css"> select{ width:111px; } </style> </head> <body> <select id="provinceid"> <option>选择省份</option> <option>湖南</option> <option>广东</option> </select> <select id="cityid"> <option>选择城市</option> </select> </body> <script type="text/javascript"> //创建ajax对象 function createajax(){ var ajax = null; try{ ajax = new activexobject("microsoft.xmlhttp"); }catch(e){ try{ ajax = new xmlhttprequest(); }catch(e1){ alert("请更换浏览器"); } } return ajax; } </script> <script type="text/javascript"> document.getelementbyid("provinceid").onchange = function(){ //清空城市除了第一项 var cityelem = document.getelementbyid("cityid"); cityelem.options.length = 1; //获取选中的省份 var province = this.value; //进行编码处理 province = encodeuri(province); if("选择省份" != province){ var ajax = createajax(); //提交方式为get var method = "get"; //提交路径为servlet路径 var url = "${pagecontext.request.contextpath}/provinceservlet?time=" + new date().gettime()+ "&province=" +province; //准备发送异步请求 ajax.open(method, url); //由于是get请求,所以不需要设置请求头 //发送请求 ajax.send(null); //监听服务器响应状态的变化 ajax.onreadystatechange = function(){ //响应状态为4 表示ajax已经完全接受到服务器的数据了 if(ajax.readystate == 4){ //接收到的数据正常 if(ajax.status == 200){ //获取服务器传来的html数据 var xmldocument = ajax.responsexml; //进行dom操作解析xml //解析xml数据 var citys = xmldocument.getelementsbytagname("city"); for(var i = 0; i< citys.length;i++){ //获取xml中的值 :不能用innerhtml,要用nodevalue var city = citys[i].firstchild.nodevalue; //创建option var optelement = document.createelement("option"); optelement.innerhtml = city; //获取city var cityelems = document.getelementbyid("cityid"); cityelems.appendchild(optelement); } } } } } } </script> </html>
然后在后台provinceservlet中通过get方式获取请求,将返回的数据以o(输出)流的方式发送出去,上面代码的ajax.responsexml获取输出的数据,并进行dom操作
public class provinceservlet extends httpservlet { @override protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception { req.setcharacterencoding("utf-8"); resp.setcharacterencoding("utf-8"); string province = req.getparameter("province"); //重新编码 province = new string(province.getbytes("iso-8859-1"),"utf-8"); //设置格式为xml resp.setcontenttype("text/xml;charset=utf-8"); //获取字符输出流 printwriter pw = resp.getwriter(); //拼接xml头 pw.write("<?xml version='1.0' encoding='utf-8'?>"); pw.write("<citys>"); if ("湖南".equals(province)) { pw.write("<city>长沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳阳</city>"); }else if("广东".equals(province)){ pw.write("<city>广州</city>"); pw.write("<city>深圳</city>"); pw.write("<city>中山</city>"); } pw.write("</citys>"); pw.flush(); pw.close(); } }
运行结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: Angularjs单选框相关的示例代码