jQuery+ajax+servlet实现4级联动

最新推荐文章于 2019-04-28 17:53:14 发布

luckystar2008

最新推荐文章于 2019-04-28 17:53:14 发布

阅读量111

点赞数

文章标签： servlet html

Java Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Servlet：
package com.servlet.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 AjaxServlet
 */
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * Default constructor. 
     */
    public AjaxServlet() {
        // TODO Auto-generated constructor stub
    }

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

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String type = request.getParameter("type");
		String value = request.getParameter("value");
		PrintWriter pw = response.getWriter();
		System.out.println(type);
		
		if ("1".equals(type) && value != null && !"".equals(value)) { // 根据省获取市
			// 这里可以从数据库获取
			if ("hubei".equals(value)) {
				StringBuilder citys = new StringBuilder();
				citys.append("[");
				citys.append("{name:'武汉',value:'hubei001'},");
				citys.append("{name:'襄阳',value:'hubei002'}");
				citys.append("]");
				System.out.println(citys.toString());
				pw.print(citys.toString());
			}
		}
		else if ("2".equals(type) && value != null && !"".equals(value)) { // 根据省获取县
			// 这里可以从数据库获取
			StringBuilder countries = new StringBuilder();
			if ("hubei001".equals(value)) {
				countries.append("[");
				countries.append("{name:'AAA县',value:'wuhan001'},");
				countries.append("{name:'BBB县',value:'wuhan002'},");
				countries.append("{name:'CCC县',value:'wuhan003'}");
				countries.append("]");
			}
			else if ("hubei002".equals(value)) {
				countries.append("[");
				countries.append("{name:'南漳县',value:'xiangyang001'},");
				countries.append("{name:'古城县',value:'xiangyang002'}");
				countries.append("]");
			}
			
			System.out.println(countries.toString());
			pw.print(countries.toString());
		}
		else if ("3".equals(type) && value != null && !"".equals(value)) {
			StringBuilder towns = new StringBuilder();

			if ("wuhan001".equals(value)) {
				towns.append("[");
				towns.append("{name:'AAA镇',value:'wuhan001'},");
				towns.append("{name:'BBB镇',value:'wuhan002'},");
				towns.append("{name:'CCC镇',value:'wuhan003'}");
				towns.append("]");
				
			}
			else if ("wuhan002".equals(value)) {
				towns.append("[");
				towns.append("{name:'CCC镇',value:'wuhan001'},");
				towns.append("{name:'DDD镇',value:'wuhan002'},");
				towns.append("{name:'EEE镇',value:'wuhan003'}");
				towns.append("]");
			}
			else if ("wuhan003".equals(value)) {
				towns.append("[");
				towns.append("{name:'FFF镇',value:'wuhan001'},");
				towns.append("{name:'GGG镇',value:'wuhan002'}");
				towns.append("]");
			}
			else if ("xiangyang001".equals(value)) {
				towns.append("[");
				towns.append("{name:'WWW镇',value:'wuhan001'},");
				towns.append("{name:'RRR镇',value:'wuhan002'}");
				towns.append("]");
			}
			else if ("xiangyang002".equals(value)) {
				towns.append("[");
				towns.append("{name:'XXX镇',value:'wuhan001'},");
				towns.append("{name:'YYY镇',value:'wuhan002'}");
				towns.append("]");
			}
			
			System.out.println(towns.toString());
			pw.print(towns.toString());
		}
	}

}

JSP：
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!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=GB18030">
<title>四级联动下拉列表选中值保持不变</title>
<style type="text/css">
	div #tip {
		font:consolas normal 20px;
		color:blue;
	}
</style>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#province").change(function() {
			if ($("#province").val() == '0') {
				$("#city").html('');
				$("#county").html('');
				$("#town").html('');
				return;
			}
			$("#tip").append("<span>请求Ajax获取城市...<br></span>");
			$.get("ajax.do",
					{type:'1',
					 value:$("#province").val(),
					 time:new Date()
					},function(data) {
				$("#tip").append("<span>"+$("#province").val()+"下城市信息获取成功<br></span>");
				$("#city").html('<option value="0" selected="selected">请选择一个市</option>');
				var pros = eval(data);
				for (var i=0;i<pros.length;i++) {
					var cityName = pros[i].name;
					var cityValue = pros[i].value;
					var opt = $("<option value='" + cityValue + "'>"+cityName+"</option>");
					$("#city").append(opt);
				}
			});
		});
		$("#city").change(function() {
			$("#tip").append("<span>请求Ajax获取县...<br></span>");
			if ($("#city").val() == '0') {
				$("#county").html('');
				$("#town").html('');
				return;
			}
			$.get("ajax.do",
					{type:'2',
					 value:$("#city").val(),
					 time:new Date()
					 },function(data) {
				$("#tip").append("<span>"+$("#city").val()+"下县的信息获取成功<br></span>");
				$("#county").html('<option value="0" selected="selected">请选择一个县</option>');
				var pros = eval(data);
				for (var i=0;i<pros.length;i++) {
					var countyName = pros[i].name;
					var countyValue = pros[i].value;
					var opt = $("<option value='" + countyValue + "'>"+countyName+"</option>");
					$("#county").append(opt);
				}	
			});
		});
		$("#county").change(function() {
			$("#tip").append("<span>请求Ajax获取镇...<br></span>");
			if ($("#county").val() == '0') {
				$("#town").html('');
				return;
			}
			$.get("ajax.do",
					{type:'3',
					 value:$("#county").val(),
					 time:new Date()
					 },function(data) {
				$("#tip").append("<span>"+$("#county").val()+"下镇的信息获取成功<br></span>");
				$("#town").html('');
				var pros = eval(data);
				for (var i=0;i<pros.length;i++) {
					var townName = pros[i].name;
					var townValue = pros[i].value;
					var opt = $("<option value='" + townValue + "'>"+townName+"</option>");
					$("#town").append(opt);
				}	
			});
		});
	});
</script>
</head>
<body>
	省：<select id="province">
			<option value="0" selected="selected">请选择一个省</option>
			<option value="hubei">湖北</option>
		</select>
	市：<select id="city"></select>
	县：<select id="county"></select>
	镇：<select id="town"></select>
	
	<div id="tip"></div>
</body>
</html>

注意：需引入servlet3.0的jar

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery+ajax+servlet实现4级联动

Servlet：package com.servlet.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.se...
复制链接

扫一扫