本篇文章主要是对学的AJAX做一个简单的总结和应用，实现一个城市选择的级联操作。
1，前台form表单实现城市的级联
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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"> <title>级联下拉案例</title> <script type="text/javascript" src="/selectHTML.js"></script> </head> <body> 省份: <select name="province" id="province" onchange="loadCitys(this);"> </select>   城市: <select name="city" id="city"> <option value='-1'>---请选择---</option> </select> </body> </html>
2，实现级联的js代码（主要是通过AJAX技术实现前后台数据交互）
function createAjax(){
// 解决浏览器兼容性问题
var ajax;
try {
ajax = new XMLHttpRequest();
} catch (e) {
ajax = new ActiveXObject("Mircosoft.XMLHTTP");
}
return ajax;
}
// 1.在页面加载完毕后,通过AJAX方式,动态加载省份信息
window.onload=function(){
var provinceSel = document.getElementById("province");
provinceSel.innerHTML="<option value='-1'>---请选择---</option>";
// 创建核心对象
var ajax = createAjax();
// 添加状态监听
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
var resp = ajax.responseText;
//console.debug(resp);
provinceSel.innerHTML+=resp;
}
};
// 创建http请求
ajax.open("get","/province");
// 发送请求
ajax.send();
};
function onchange(){
// this >> provinceSel
//[window.]loadCitys(this);
}
// 2.在选择某个省份后,及时加载这个省份对应的城市信息
function loadCitys(privinceSel){
// 获取选中的省份ID
var pid = privinceSel.value;
// 获取城市select
var citySel = document.getElementById("city");
citySel.innerHTML="<option value='-1'>---请选择---</option>";
// 创建核心对象
var ajax = createAjax();
// 添加状态监听
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
var resp = ajax.responseText;
//console.debug(resp);
citySel.innerHTML += resp;
}
};
// 创建http请求
ajax.open("get","/loadCityByProvince?provinceId="+pid);
// 发送请求
ajax.send();
}
3，Servlet后台获取省级信息代码
package ajax.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import ajax.domain.Province;
@WebServlet("/province")
public class ProvinceServlet extends HttpServlet {
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置编码
req.setCharacterEncoding("UTF-8");
// 加载后台省份信息
List<Province> provinceList = Province.getAllProvince();
// 准备响应配置
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
// 遍历每一个省份信息.返回<option value="1">四川</option>结构
for (Province province : provinceList) {
writer.write("<option value='"+province.getId()+"'>"+province.getName()+"</option>");
}
}
}
使用json时要依赖的jar文件,在使用jquery的json时,没有引用该文件的时候容易报错。
4，Servlet获取市级城市信息
package ajax.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import ajax.domain.City;
import ajax.domain.Province;
@WebServlet("/loadCityByProvince")
public class CityServlet extends HttpServlet {
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置编码
req.setCharacterEncoding("UTF-8");
// 获取请求省份信息
String provinceId = req.getParameter("provinceId");
// 根据省份信息,加载对应的城市信息
List<City> citys = City.getCityByProvinceId(Long.parseLong(provinceId));
// 准备响应配置
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
// 遍历每一个省份信息.返回<option value="1">成都</option>结构
for (City city : citys) {
writer.write("<option value='"+city.getId()+"'>"+city.getName()+"</option>");
}
}
}
5，Servlet获取市级城市信息（这儿返回的数据为JSON格式）
package ajax.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONSerializer;
import ajax.domain.City;
import ajax.domain.Province;
@WebServlet("/loadCityByProvinceJSON")
public class CityJSONServlet extends HttpServlet {
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置编码
req.setCharacterEncoding("UTF-8");
// 获取请求省份信息
String provinceId = req.getParameter("provinceId");
// 根据省份信息,加载对应的城市信息
List<City> citys = City.getCityByProvinceId(Long.parseLong(provinceId));
// 准备响应配置
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
// 遍历每一个省份信息.返回<option value="1">成都</option>结构
writer.write(JSONSerializer.toJSON(citys).toString());
}
}
web.xml配置文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>Welcome to Tomcat</display-name>
<description>
Welcome to Tomcat
</description>
</web-app>
如果上述Servlet返回JSON数据，会依赖JSON相关jar包
ezmorph-1.0.6：使用json时要依赖的jar文件,在使用jquery的json时,没有引用该文件的时候容易报错。
json-lib-2.3-jdk15：JSON核心包
使用json-lib-2.2.3-jdk15.jar必要也要导入它的依赖包：
ezmorph-1.0.6.jar
commons-lang 2.4
commons-beanutils 1.7.0
commons-collections 3.2
commons-logging 1.1.1
相关推荐
完整可运行的用jquery开发的ajax各种实例包括（级联菜单，谷歌式搜索提示，可编辑表格页面无刷新切换等）
Ajax三级无刷新级联实例使用CallBackObject.js 简易Ajax框架，使用js实现，数据库为Sql2005的，自己学的一个小例子简单易懂。
AJAX实例的级联菜单,初学AJAX。
该实例为本人项目中使用的模块代码，经过专业测试人员测试，兼容所有主流浏览器，如有不解之处请联系本人
ajax+ssh 实现省份城市级联查询 应用实例
Ajax应用几个实例-在线用户计数实例、在线表格编辑实例、 无刷新形式的查询功能实例、实时校验实例、Web级联菜单实例
一个完整的实例，下载导入myeclipse就可以使用的 城市级联完整实例(带数据库.sql文件) jquery+ajax+$.jetjson
这是一个ajax+jQuery+ssh+oracle的myeclipse级联实例，可以直接导入工具后运行。
这是一个利用了Ajax技术的一个Jquery实例，动态的生成级联的下拉列表框，在中关村zol中经常可以看到。如果遇到无法显示的情况，请自己阅读代码。
实例61 实现级联菜单的设计 实例62 PHP+Ajax树状菜单 第8章 Ajax数据库操作 实例63 显示数据库系统信息 实例64 实现数据库常见操作 实例65 完成数据库多种查询显示 实例66 数据库记录自动提示 实例67 AjaX...
城市级联实例 数据库交互 java jqurey ajax $.getjson
主要介绍了ajax级联菜单实现方法,结合实例形式分析了基于ajax与后台php交互实现级联菜单功能的相关操作技巧,需要的朋友可以参考下
ASP.NET中AJAX技术原理 实例 表单数据验证 级联菜单
AJAX综合实例，内附源码和数据库。。 主要有自动保存草稿，无刷新回复，灯箱效果，切换标签页，购物车，自动查找邮编，聊天室，动态加载FAQ，多级级联菜单，动态树形列表，动态许愿墙等几十个常用实例。。 超值哦。...
本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能。分享给大家供大家参考，具体如下： 一 代码 fun.js： // JavaScript Document $(document).ready( function(){ $.get(returnpc.php?flag=p, null, ...
本篇文章主要是对Ajax级联菜单的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
程序描述：本章将介绍 GWT应用中高级应用的部分，包括各中组件和布局、如何发送XMLHttpRequest请求，以及如何解决浏览器历史记录问题等等，同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample....
12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView AjaxChartRoom Ajax无刷新聊天室 第14章（\C05） AutoComplete AutoCompleteExtender控件的使用 ...