Ajax實現省份-城市二級下拉聯動
阿新 • • 發佈：2019-02-04
基於XML，以POST方式，完成省份-城市二級下拉聯動
資料庫 mysql，表：t_city
JavaWeb專案，使用servlet
ajax.js// 建立AJAX非同步物件 function createAJAX() { var ajax = null; if (window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else { // 如果是IE5或IE6，使用 ActiveXObject ajax = new ActiveXObject("Microsoft.XMLHTTP"); } return ajax; }
province.jsp
ProvinceCityServlet.java<%@ 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:120px"> <option value="0">選擇省份</option> <option>福建</option> <option>廣東</option> </select> <select id="cityId" style="width:120px"> <option>選擇城市</option> </select> <script type="text/javascript"> // 定位到城市下拉框 var cityEle = document.getElementById("cityId"); // 定位到省份下拉框，同時新增內容改變事件 document.getElementById("provinceId").onchange = function(){ /* // 下面的方式可以獲取省份名，可是太麻煩了 // 獲取選中option標籤的索引值 var index = this.selectedIndex; // 定位選中的option標籤 var optionEle = this[index]; // 獲取option標籤中的內容，即省份的名字 var provinceName = optionEle.innerHTML; */ // 獲取選中省份的名字 var provinceName = this.value; if(provinceName == "0"){ // 清空城市下拉框中的內容，除了第一項外 // 方法一 //cityEle.innerHTML = "<option>選擇城市</option>"; // 方法二（推薦） cityEle.options.length = 1; return; } var ajax = createAJAX(); var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime(); ajax.open("POST",url); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); ajax.send("provinceName=" + provinceName); ajax.onreadystatechange = function(){ if(ajax.readyState == 4 && ajax.status == 200){ var cityText = "<option>選擇城市</option>"; // 清空城市下拉框中的內容，除了第一項外 cityEle.options.length = 1; // 從伺服器返回的xml資料 var xmlDoc = ajax.responseXML; // 按照DOM規則解析xml文件 var cityEles = xmlDoc.getElementsByTagName("city"); for(i=0; i<cityEles.length; i++){ // innerHTML不能獲取XML資料來源的節點值，下面的方法無法在ie中取到值 // var city = cityEles[i].cityEles[i].innerHTML; // 下面兩種方式都可以，推薦後一種 // var city = cityEles[i].childNodes[0].nodeValue; var city = cityEles[i].firstChild.nodeValue; // 建立option標籤 var optionEle = document.createElement("option"); optionEle.innerHTML = city; cityEle.appendChild(optionEle); } } }; }; </script> <!-- <form action="" enctype="application/x-www-form-urlencoded"></form> --> </body> </html>
package cn.javaee.js.province; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 基於XML，以POST方式，完成省份-城市二級下拉聯動 * * @author lzf * @version V1.0 */ public class ProvinceCityServlet extends HttpServlet { private static final long serialVersionUID = -3426124869778232040L; public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); // 通知ajax非同步物件，伺服器響應的資料是xml格式的 response.setContentType("text/xml;charset=UTF-8"); try { // 省份名稱 String provinceName = request.getParameter("provinceName"); // 用來存放xml資料 StringBuffer sb = new StringBuffer(); sb.append("<?xml version='1.0' encoding='UTF-8'?>"); sb.append("<citys>"); // JDBC連線mysql資料庫 Connection conn = null; Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/hib_demo"; conn = DriverManager.getConnection(url, "root", "root"); // 預編譯，防注入 String sql = "select city from t_city where province=? "; PreparedStatement stmt = conn.prepareStatement(sql); // 注意：這裡的index是1而不是0 stmt.setString(1, provinceName); ResultSet rs = stmt.executeQuery(); while (rs.next()) { // 注意：這裡的index是1而不是0 String city = rs.getString(1); sb.append("<city>"); sb.append(city); sb.append("</city>"); } sb.append("</citys>"); // 關閉連線 rs.close(); stmt.close(); conn.close(); // 輸出流 PrintWriter pw = response.getWriter(); pw.write(sb.toString()); // 關閉流 pw.flush(); pw.close(); } catch (Exception e) { e.printStackTrace(); } } }