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实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中，如...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
这个项目“前端jquery+后端servlet实现三级联动项目省市区”就是一个典型的案例，它展示了如何利用jQuery在前端处理用户交互，以及如何通过Servlet在后端进行数据处理和传输。下面我们将详细探讨这个项目中的关键...
在这个项目中，"Ajax + jQuery + json + js + jsp + servlet 三级联动"是一个完整的解决方案，它涵盖了从前端到后端的数据通信和处理。 首先，让我们深入理解每个技术的作用： 1. **Ajax**（Asynchronous ...
本话题聚焦于“jquery + servlet实现省市联动二级菜单”这一技术实践，这是一个常见的前端与后端协同工作的场景，主要用于提升用户体验，使得用户在选择省份时，市一级的下拉菜单能实时更新为相应省份的城市。...
在实现三级联动时，可以使用ExtJS的ComboBox组件，通过store与远程数据源（servlet）连接，实现数据的动态加载。ExtJS的模型层（Model）、存储层（Store）和视图层（View）设计使数据管理更为规范，同时其丰富的组件...
这种联动效果通过Ajax和jQuery的配合实现，使得用户可以在一个界面上完成连续的多级选择，而无需多次提交表单。 综上所述，这个项目展示了SSH框架如何与前端技术相结合，构建出一个高效的、具有良好交互体验的地区...
"java+Ajax实现省市地三级联动"就是一个典型的案例，它利用了Java、Ajax、JSON、Servlet和JavaScript等技术，来构建一个动态的下拉选择框，使得用户在选择省之后，市和地级行政区划会根据所选的省自动更新。...
讲解ajax文件上传，三级联动等；利用ajax技术返回普通文本，xml格式，JSON格式数据等案例；具体案例如下： 1.前端创建HTTPXMLRequest对象及实现步骤，后台用jsp的servlet处理数据； 2.封装HTTPXMLRequest对象，实现...
在Web开发中，二级或三级联动下拉框是一种常见的交互设计，主要用于展示层次关系的数据，如省份-城市-区县的区域选择。本教程将详细讲解如何使用Ajax和Servlet技术来实现这一功能。 首先，我们需要了解Ajax...
在实现下拉框级联时，JQuery负责监听用户在第一个下拉框中的选择，然后通过Ajax异步请求向Servlet发送数据，获取相应的级联数据，并更新第二个下拉框的选项。 以下是实现步骤： 1. **创建Servlet**：在Servlet中，...
在本文中，我们将深入探讨如何使用Ajax、JSP、MySQL和Servlet技术来实现一个功能完善的用户注册验证系统，以及在该系统中实现省市联动的效果。这对于JavaWeb开发初学者和Ajax爱好者来说，是一个非常实用的学习案例。...
本案例主要展示了如何使用JQuery和Servlet来实现“省市联动”的功能，这是一种常见的前端与后端交互的应用场景，尤其在地址选择或者填写表单时经常遇到。AJAX（Asynchronous JavaScript and XML）技术在此中扮演了...
在这个“JSP+AJAX三级级联及更多级的实现”主题中，我们将深入探讨如何通过这两种技术构建一个能够实现多级联动下拉菜单的系统，这种功能常见于地址选择、部门结构展示等场景。 首先，JSP是Java的一种服务器端脚本...
在IT行业中，尤其是在Web开发领域，"Java+Ajax无刷新实现省市县三级联动"是一个常见的需求，主要用于提高用户体验，使得用户在选择地理位置时无需多次点击提交按钮，而是通过异步方式实时更新数据。这个实例是一个...
在Web开发中，"servlet+ajax做的两个下拉列表联动"是一种常见的交互技术，用于增强用户界面的动态性。这种技术通常应用于表单中，当用户在一个下拉列表中选择一个选项时，另一个下拉列表会根据所选选项动态更新其...
主要用于三级联动，使用的html，ajax，后端用的原生servlet，或者你也可以根据自己的需要使用框架，毕竟只是做了数据库查询操作，返回的是json格式的数据，所以对后端要求不高，本资源为自己整理出来的，当然数据库...
以上就是“java+ajax省市区三级联动实例”涉及的主要技术和实现过程。这个实例展示了Java后端与Ajax前端如何协同工作，提供动态的、实时的数据交互，对于理解和掌握Web开发中的数据交互有很好的实践意义。
5. **库与框架**：在实际开发中，我们通常会借助于jQuery、Prototype、AngularJS等JavaScript库或框架，简化Ajax的使用，提高开发效率。 **经典实例分析** "JSP+Ajax1"可能包含了各种使用JSP和Ajax结合的实例，比如...
在Web开发中，"Ajax JavaWeb JS 三级联动"是一个常见的功能需求，它涉及...总之，"Ajax JavaWeb JS 三级联动"是一个集成了前端、后端和异步通信技术的复杂功能，通过合理的分工协作，可以实现高效、流畅的Web交互体验。