ajax動態更新下拉列表
阿新 • • 發佈：2019-01-02
前面做了一個ajax的小demo，今天看一個動態更新下拉列表，或者也叫級聯更新下拉列表，這個也是利用ajax的非同步呼叫去後臺實現資料請求，然後回到前臺完成下拉列表資料的更新，以增強web應用的互動性。
後臺servlet
package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class CreateXML */ @WebServlet("/CreateXML") public class CreateXML extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public CreateXML() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml"); response.setCharacterEncoding("UTF-8"); String selected = request.getParameter("selected"); PrintWriter out = response.getWriter(); out.println("<response>"); //下面分別為兩個省份建立地市 if (selected.equals("1")){//如果選擇的是“湖南省” out.println("<city>"); out.println("<cityname>長沙</cityname>"); out.println("<cityvalue>1</cityvalue>"); out.println("</city>"); out.println("<city>"); out.println("<cityname>婁底</cityname>"); out.println("<cityvalue>2</cityvalue>"); out.println("</city>"); out.println("<city>"); out.println("<cityname>常德</cityname>"); out.println("<cityvalue>3</cityvalue>"); out.println("</city>"); }else{//如果選擇的是“廣東省” out.println("<city>"); out.println("<cityname>廣州</cityname>"); out.println("<cityvalue>1</cityvalue>"); out.println("</city>"); out.println("<city>"); out.println("<cityname>深圳</cityname>"); out.println("<cityvalue>2</cityvalue>"); out.println("</city>"); out.println("<city>"); out.println("<cityname>佛山</cityname>"); out.println("<cityvalue>3</cityvalue>"); out.println("</city>"); } out.println("</response>"); out.flush(); out.close(); } }
我們推送到前臺的資料為<response><city><cityname>長沙</cityname><cityvalue>1</cityvalue></city></response> xml格式。
前臺頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>AjaxDemo</title> </head> <script language="javascript"> // 定義一個變數用於存放XMLHttpRequest物件 var xmlHttp; // 該函式用於建立一個XMLHttpRequest物件 function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } // 這是響應省份列表的onChange事件的處理方法 function updateSelect(){ var selected = document.getElementById("slt1").value;//得到省份列表的當前選值 // document.getElementById("slt1").selectedIndex 獲得選中項索引值（數字） // document.getElementById("slt1").value 獲得選中項的value值 // 建立一個XMLHttpRequest物件 createXMLHttpRequest(); // 將狀態觸發器繫結到一個函式 xmlHttp.onreadystatechange = processor; // 通過GET方法向指定的URL建立伺服器的呼叫 xmlHttp.open("GET", "CreateXML?selected="+selected); // 傳送請求 xmlHttp.send(null); } // 處理從伺服器返回的XML文件並更新地市下拉列表 function processor() { // 定義一個變數用於存放從伺服器返回的響應結果 var result; // 如果響應完成 並且 返回成功 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// // 取出伺服器返回的XML文件的所有city標籤的子節點 result = xmlHttp.responseXML.getElementsByTagName("city"); // 先清除地市列表的現有內容 while (document.getElementById("slt2").options.length>0){ document.getElementById("slt2").removeChild(document.getElementById("slt2").childNodes[0]); } // 解析XML中的資料並更新地市列表 for(var i=0;i<result.length;i++){ var option = document.createElement("OPTION"); option.text = result[i].getElementsByTagName("cityname")[0].innerHTML;//這就是取出<cityname>中的值 option.value = result[i].getElementsByTagName("cityvalue")[0].innerHTM;//這就是取出<cityvalue>中的值 document.getElementById("slt2").options.add(option);//為地市列表中新增選項 } } } </script> <body> <br><br> <center> <form name="form1" action="#" method="POST"> 請選擇省份： <select id="slt1" onChange="updateSelect()"> <option value="1">湖南省</option> <option value="2">廣東省</option> </select> 地市： <select id="slt2"> <option value="">請選擇地市</option> </select> </form> </center> </body> </html>
上面的程式，初始化頁面效果為
這讓初始化的省份無法看到自己的地市，不夠完美，怎麼處理一下呢？
在頁面載入完成後，讓程式先去後臺請求一下當前的省份的地市。頁面載入完成，load事件，給body繫結load方法即可。
我們的處理方法為
<body onload="updateSelect()">這樣，頁面載入完成時，便可以看到頁面上面的廣東省的地市。
