Ajax案例-基於XML，以POST方式，完成省份-城市二級下拉聯動
阿新 • • 發佈：2018-11-30
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基於XML，以POST方式，完成省份-城市二級下拉聯動</title> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <select id="provinceID" style="width:111px"> <option>選擇省份</option> <option>湖南</option> <option>廣東</option> </select> <select id="cityID" style="width:111px"> <option>選擇城市</option> </select> <script type="text/javascript"> //定位省份下拉框，同時新增內容改變事件 document.getElementById("provinceID").onchange = function(){ //清空城市下拉框中的內容，除第一項外 var cityElement = document.getElementById("cityID"); cityElement.options.length = 1; //獲取選中option標籤的索引號，從0開始 var index = this.selectedIndex; //定位選中的option標籤 var optionElement = this[index]; //獲取選中的option標籤中的內容，即省份 var province = optionElement.innerHTML; //如果選中的內容不是"選擇省份" if("選擇省份" != province){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime(); ajax.open(method,url); //設定AJAX請求頭 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "province=" + province; ajax.send(content); //---------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5)從AJAX非同步物件中獲取伺服器響應的xml文件 var xmlDocument = ajax.responseXML; //NO6)按照DOM規則，解析XML文件 var cityElementArray = xmlDocument.getElementsByTagName("city"); var size = cityElementArray.length; for(var i=0;i<size;i++){ //innerHTML只能用在html/jsp中，不能用在xml中 var city = cityElementArray[i].firstChild.nodeValue; //<option></option> var optionElement = document.createElement("option"); //<option>廣州</option> optionElement.innerHTML = city; //<select><option>廣州</option></select> cityElement.appendChild(optionElement); } } } } } } </script> </body> </html>
package loaderman.provincecity; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 基於XML，以POST方式，完成省份-城市二級下拉聯動 * @author AdminTC */ public class ProvinceCityServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String province = request.getParameter("province"); //通知AJAX非同步物件，伺服器響應的資料為xml格式的 response.setContentType("text/xml;charset=UTF-8"); //獲取字元輸出流 PrintWriter pw = response.getWriter(); pw.write("<?xml version='1.0' encoding='UTF-8'?>"); pw.write("<root>"); if("廣東".equals(province)){ 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("<city>岳陽</city>"); } pw.write("</root>"); pw.flush(); pw.close(); } }