您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了使用xml數(shù)據(jù)載體實(shí)現(xiàn)城市省份二級(jí)聯(lián)動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
首先寫好前臺(tái)頁面testProvince.jsp,將請求通過open、send發(fā)送到服務(wù)器
<%@ 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>二級(jí)聯(lián)動(dòng)</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"> //創(chuàng)建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(){ //清空城市除了第一項(xiàng) var cityElem = document.getElementById("cityID"); cityElem.options.length = 1; //獲取選中的省份 var province = this.value; //進(jìn)行編碼處理 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; //準(zhǔn)備發(fā)送異步請求 ajax.open(method, url); //由于是get請求,所以不需要設(shè)置請求頭 //發(fā)送請求 ajax.send(null); //監(jiān)聽服務(wù)器響應(yīng)狀態(tài)的變化 ajax.onreadystatechange = function(){ //響應(yīng)狀態(tài)為4 表示ajax已經(jīng)完全接受到服務(wù)器的數(shù)據(jù)了 if(ajax.readyState == 4){ //接收到的數(shù)據(jù)正常 if(ajax.status == 200){ //獲取服務(wù)器傳來的html數(shù)據(jù) var xmlDocument = ajax.responseXML; //進(jìn)行dom操作解析xml //解析xml數(shù)據(jù) var citys = xmlDocument.getElementsByTagName("city"); for(var i = 0; i< citys.length;i++){ //獲取xml中的值 :不能用innerHTML,要用nodeValue var city = citys[i].firstChild.nodeValue; //創(chuàng)建option var optElement = document.createElement("option"); optElement.innerHTML = city; //獲取city var cityElems = document.getElementById("cityID"); cityElems.appendChild(optElement); } } } } } } </script> </html>
然后在后臺(tái)ProvinceServlet中通過GET方式獲取請求,將返回的數(shù)據(jù)以O(shè)(輸出)流的方式發(fā)送出去,上面代碼的ajax.responseXML獲取輸出的數(shù)據(jù),并進(jìn)行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"); //設(shè)置格式為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(); } }
運(yùn)行結(jié)果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。