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
相关推荐
jquery+ajax+jsp+servlet实现二级级联菜单,这是自己在实践中总结的一点小经验，代码从前台JAP到Servlet以及后台数据库设计，测试数据完整的流程，相信有点java基础的同仁们都可以看得明白
主要用于三级联动，使用的html，ajax，后端用的原生servlet，或者你也可以根据自己的需要使用框架，毕竟只是做了数据库查询操作，返回的是json格式的数据，所以对后端要求不高，本资源为自己整理出来的，当然数据库...
利用jQuery+Ajax+json从数据库获取数据，将获取的数据利用json格式传递，实现select控件三级联动;内附数据库sql脚本。
讲解ajax文件上传，三级联动等；利用ajax技术返回普通文本，xml格式，JSON格式数据等案例；具体案例如下： 1.前端创建HTTPXMLRequest对象及实现步骤，后台用jsp的servlet处理数据； 2.封装HTTPXMLRequest对象，实现...
一个非常简单的AJAX小例子 ——“省市联动”，技术使用：JQuery+Servlet实现，数据传输方式使用XML
数据库是mysql，省市地是三张不同的表，压缩包内没有数据表但包含了所有需要的jar包，后台是servlet+jdbc，前端使用ajax实现省市地三级联动。最简单最初级的实现方式。。。无多余代码。
通过Jquery Ajax操作数据库实现二级级联....
jquery Ajax实现Select动态添加数据，具体内容如下 1.背景 最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的...
本项目涉及html5+css3+js6+jquery+ajax+servlet3+mvc+jdbctemplate+druid+mysql等技术完成。 其功能包含添加入职员工信息，查询入职员工信息，根据部门做二级联动搜索入职时间查询员工信息，修改员工信息以及选择...
自己写的一些jQuery示例，里面包括：ajax各种请求方式及servlet返回方式，二级和三级联动，ajax解析，jQuery经典手册等,导入myeclipse即可用!
省市联动，前端是JSP，用到了JQuery，后台采用servlet来构建。 省市联动，前端是JSP，用到了JQuery，后台采用servlet来构建。
数据存储：MySqL 系统设计采用了B/S模式 (浏览器/服务器)。不需要在客户机上再安装客户端... 所用技术： 本项目主要采用了Web分页(上下页),JS表单验证(用户是否已被注册)、dbcp连接池、Ajax(三级联动)，JQuery等技术。