随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)
在实际项目中经常用到列表联动,比如省份、城市、区域三级联动,这里简要以二级联动来进行演示,思路很简单:
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);
}
}