ajax动态更新下拉列表

- 日理万妓 2022-08-05 14:28 152阅读 0赞

前面做了[一个ajax的小demo][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>

上面的程序，初始化页面效果为 ![SouthEast][]

这让初始化的省份无法看到自己的地市，不够完美，怎么处理一下呢？

在页面加载完成后，让程序先去后台请求一下当前的省份的地市。页面加载完成，load事件，给body绑定load方法即可。

我们的处理方法为

这样，页面加载完成时，便可以看到页面上面的广东省的地市。 ![SouthEast 1][]

[ajax_demo]: http://blog.csdn.net/magi1201/article/details/44569657
[SouthEast]: /images/20220805/7bb8b8bd48aa47b68d5add8b968bd8a0.png
[SouthEast 1]: /images/20220805/2cc5424e803e4e24af2ec1e6284cfe96.png