Ajax应用之级联下拉列表

来源：互联网发布：c语言32个关键字举例编辑：程序博客网时间：2024/06/05 14:43

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

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,onerror, "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, onerror, method, params) {this.req = null;this.onload = onload;this.onerror = (onerror) ? onerror : this.defaultError;this.loadDate(url, method, params);}net.AjaxRequest.prototype.loadDate = function(url, method, 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, HttpServletResponse response) throws ServletException, 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, HttpServletResponse response) throws ServletException, 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 = result.substring(0, 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, HttpServletResponse response) throws ServletException, IOException {        doGet(request, response);    }}

0 0