本篇文章主要是對學的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" οnchange="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.οnlοad=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