Ajax应用之级联下拉列表

在实际项目中经常用到列表联动，比如省份、城市、区域三级联动，这里简要以二级联动来进行演示，思路很简单：

1、程序进入后首先调用获取省份方法getProvince，使用Ajax向服务器请求省份数据。

2、回调函数获取到省份数据后，将数据加载到省份下拉列表中。

3、使用第一个省份调用getCity方法去获取该省份对应的城市数据

4、获取城市数据成功后，将数据加载到城市下拉列表中

5、省份下拉列表设置改变监听器，发生改变后再次调用getCity获取城市数据。

注：这是的数据是自己简要构造的，绑定的id也是直接绑定的名称，实际中应该从数据库读取分别绑定。

要实现三级联动继续添加获取区域的方法以及对应的回调方法即可。

示例如下：

index.jsp：

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">

<script language="JavaScript" src="JS/AjaxRequest.js"></script>

<script language="JavaScript">
	//获取省份
	function getProvince() {
		var loader = new net.AjaxRequest(
				"Zoneservlet?action=getProvince&nocache="
						+ new Date().getTime(),dealProvince,onerror,"GET");
	}

	//处理获取到省份后的结果
	function dealProvince() {
		var provinceArr = this.req.responseText.split(",");
		for (i = 0; i < provinceArr.length; i++) {
			document.getElementById("province").options[i] = new Option(
					provinceArr[i],provinceArr[i]);
		}

		//初始时获取第一个省份的城市
		if (provinceArr[0] != "") {
			getCity(provinceArr[0]);
		}
	}

	//获取城市
	function getCity(selProvince) {
		var loader = new net.AjaxRequest(
				"Zoneservlet?action=getCity&parProvince=" + selProvince
						+ "&nocache=" + new Date().getTime(),dealCity,"GET");
	}

	//处理获取城市的结果
	function dealCity() {
		var cityArr = this.req.responseText.split(",");
		document.getElementById("city").length = 0;
		for (i = 0; i < cityArr.length; i++) {
			document.getElementById("city").options[i] = new Option(cityArr[i],cityArr[i]);
		}
	}

	function onerror() {
		alert("您的操作有误！");
	}
</script>
<title>起始页</title>
</head>
<body onload="getProvince()">
	<select name="province" id="province" onchange="getCity(this.value)"></select>
	<select name="city" id="city"></select>
</body>
</html>

AjaxRequest.js：

var net = new Object();
var req;
var onload;
var onerror;

net.AjaxRequest = function(url,onload,method,params) {
	this.req = null;
	this.onload = onload;
	this.onerror = (onerror) ? onerror : this.defaultError;
	this.loadDate(url,params);
}

net.AjaxRequest.prototype.loadDate = function(url,params) {
	if (!method) {
		method = "GET";
	}
	if (window.XMLHttpRequest) {
		this.req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		this.req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (this.req) {
		try {
			var loader = this;
			this.req.onreadystatechange = function() {
				net.AjaxRequest.onReadyState.call(loader);
			}
			this.req.open(method,url,true);
			if (method == "POST") {
				this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			}
			this.req.send(params);
		} catch (e) {
			this.onerror.call(this);
		}
	}

	net.AjaxRequest.onReadyState = function() {
		var req = this.req;
		var ready = req.readyState;
		if (ready == 4) {
			if (req.status == 200) {
				this.onload.call(this);
			} else {
				this.onerror.call(this);
			}
		}
	}

	net.AjaxRequest.prototype.defaultError = function() {
		alert("错误数据\n\n回调状态：" + this.req.readyState + "\n状态：" + this.req.status);
	}

}

Zoneservlet.java:

package com.home.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

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 AddServlet
 */
@WebServlet("/Zoneservlet")
public class Zoneservlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private static Map<String,String[]> provinceMap = new HashMap<>();
    static {
        provinceMap.put("四川省",new String[] { "成都市","广安市","资阳市" });
        provinceMap.put("广东省",new String[] { "广州市","深圳市","珠海市" });
    }

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Zoneservlet() {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
        String action = request.getParameter("action");
        if ("getProvince".equals(action)) {
            getProvince(request,response);
        } else if ("getCity".equals(action)) {
            getCity(request,response);
        }
    }

    public void getProvince(HttpServletRequest request,IOException {
        response.setCharacterEncoding("UTF-8");
        String result = "";
        Set<String> set = provinceMap.keySet();
        Iterator<String> it = set.iterator();
        while (it.hasNext()) {
            result = result + it.next() + ",";
        }
        result = result.substring(0,result.length() - 1);
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(result);
        out.flush();
        out.close();
    }

    public void getCity(HttpServletRequest request,IOException {
        response.setCharacterEncoding("UTF-8");
        String result = "";
        String selProvince = request.getParameter("parProvince");
        selProvince = new String(selProvince.getBytes("ISO-8859-1"),"gbk");
        String[] arrCity = provinceMap.get(selProvince);
        for (String city : arrCity) {
            result = result + city + ",result.length() - 1);
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(result);
        out.flush();
        out.close();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,IOException {
        doGet(request,response);
    }

}

Ajax应用之级联下拉列表

相关文章