AJAX應用案例--基於mysql，以POST方式，用DOM對象，完成三級級下拉聯動【省份-城市-區域】，效果圖如下：
數據庫如下：
省份 城市 區域
Jsp頁面代碼：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<select id="provinceID">
<option>請選擇省份</option>
<option value="1">廣東</option>
<option value="2">湖南</option>
</select>
<select id="cityID">
<option>請選擇城市</option>
</select>
<select id="areaID">
<option>請選擇區域</option>
</select>
<script type="text/javascript">
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
ajax = new XMLHttpRequest();
}catch(e){
alert("請更換瀏覽器");
}
}
return ajax;
}
</script>
<script type="text/javascript">
//創建AJAX引擎對象
var ajax = createAJAX();
//產生事件
document.getElementById("provinceID").onchange = function(){
//再次選擇省份時，清空city下拉框
//定位city下拉框
var citySelectElement = document.getElementById("cityID");
var optionElementArray = citySelectElement.options;
var size = optionElementArray.length;
if(size>1){
for(var i=size-1;i>0;i--){
citySelectElement.removeChild(optionElementArray[i]);
}
}
//再次選擇省份時，清空area下拉框
//定位area下拉框
var areaSelectElement = document.getElementById("areaID");
var areaOptionArray = areaSelectElement.options;
var size = areaOptionArray.length;
if(size>1){
for(var i=size-1;i>0;i--){
areaSelectElement.removeChild(areaOptionArray[i]);
}
}
//獲取選中省份的編號
var optionElement = this[this.selectedIndex];
var provinceId = optionElement.value;
//準備發送請求
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();
ajax.open(method,url);
//設置以POST表單形式發送，自動將請求體的中文進行編碼
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//真正發送請求體中的數據
var content = "provinceId="+provinceId + "&method=provinceToCity";
ajax.send(content);
//監聽服務端的響應
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var jsonJavaString = ajax.responseText;
//jsonJavaString = [{"name":"長沙"},{"name":"湘潭"},{"name":"株洲"}]
var json = eval("("+jsonJavaString+")");
//返回值，就是可解析並執行的JavaScript代碼
//json = [{"name":"長沙"},{"name":"湘潭"},{"name":"株洲"}]
var size = json.length;
//迭代
for(var i=0;i<size;i++){
var city = json[i].name;
var cid = json[i].id;
//創建option節點
var optionElement = document.createElement("option");
//設置option節點之間的內容
optionElement.innerHTML = city;
optionElement.setAttribute("value",cid);
//添加到city下拉框中
citySelectElement.appendChild(optionElement);
}
}
}
};
};
//===============================cityToArea==================================================
//產生事件
document.getElementById("cityID").onchange = function(){
//再次選擇城市時，定位area下拉框，清空area下拉框
var areaSelectElement = document.getElementById("areaID");
var areaOptionArray = areaSelectElement.options;
var size = areaOptionArray.length;
if(size>1){
for(var i=size-1;i>0;i--){
areaSelectElement.removeChild(areaOptionArray[i]);
}
}
//獲取選中城市的編號
var optionElement = this[this.selectedIndex];
var cid = optionElement.value;
//準備發送請求
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+new Date().getTime();
ajax.open(method,url);
//設置以POST表單形式發送，自動將請求體的中文進行編碼
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//真正發送請求體中的數據
var content = "cid="+cid + "&method=cityToArea";
ajax.send(content);
//監聽服務端的響應
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var jsonJavaString = ajax.responseText;
//jsonJavaString = [{"name":"長沙"},{"name":"湘潭"},{"name":"株洲"}]
var json = eval("("+jsonJavaString+")");
//返回值，就是可解析並執行的JavaScript代碼
//json = [{"name":"長沙"},{"name":"湘潭"},{"name":"株洲"}]
var size = json.length;
//迭代
for(var i=0;i<size;i++){
var area = json[i].name;
//var cid = json[i].name;
//創建option節點
var optionElement = document.createElement("option");
//設置option節點之間的內容
optionElement.innerHTML = area;
//optionElement.setAttribute("id",cid);
//添加到city下拉框中
areaSelectElement.appendChild(optionElement);
}
}
}
};
};
</script>
</body>
</html>
servlet代碼：
package kerwin.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kerwin.bean.Area;
import kerwin.bean.City;
import kerwin.service.ProvinceCityAreaService;
import net.sf.json.JSONArray;
import net.sf.json.JsonConfig;
public class ProvinceCityAreaServlet extends HttpServlet {
ProvinceCityAreaService service = new ProvinceCityAreaService();
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String method = request.getParameter("method");
if("provinceToCity".equals(method)){
this.ProvinceToCity(request, response);
}else if("cityToArea".equals(method)){
this.cityToArea(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
public void ProvinceToCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
List<City> citys = null;
//獲取參數
String pid = request.getParameter("provinceId");
try {
citys = service.findAllCityByProvince(pid);
//使用第三方工具類，將對象轉成JSON格式的字符串
JsonConfig config = new JsonConfig();
//去掉不需要的參數
//config.setExcludes(new String[]{"id"});
//將citys轉換爲json格式的字符串
JSONArray jsonArray = JSONArray.fromObject(citys, config);
String jsonJavaStr = jsonArray.toString();
//將字符串響應給ajax引擎
out.write(jsonJavaStr);
} catch (Exception e) {
e.printStackTrace();
}
}
public void cityToArea(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
List<Area> areas = null;
//獲取參數
String cid = request.getParameter("cid");
try {
areas = service.findAllAreaByProvince(cid);
//使用第三方工具類，將對象轉成JSON格式的字符串
JsonConfig config = new JsonConfig();
//去掉不需要的參數
config.setExcludes(new String[]{"id"});
//將citys轉換爲json格式的字符串
JSONArray jsonArray = JSONArray.fromObject(areas, config);
String jsonJavaStr = jsonArray.toString();
//將字符串響應給ajax引擎
out.write(jsonJavaStr);
} catch (Exception e) {
e.printStackTrace();
}
}
}
service層代碼：省略.....
DAO層代碼：
package kerwin.dao;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import kerwin.bean.Area;
import kerwin.bean.City;
import kerwin.utils.JdbcUtil;
public class ProvinceCityAreaDao{
public List<City> findAllCityByProvince(String pid) throws Exception{
List<City> citys = null;
QueryRunner runner = new QueryRunner(JdbcUtil.dataSource);
String sql = "select * from citys where pid = ?";
Object params[]={pid};
citys = runner.query(sql, new BeanListHandler<City>(City.class), params);
return citys;
}
public List<Area> findAllAreaByProvince(String cid) throws Exception{
List<Area> areas = null;
QueryRunner runner = new QueryRunner(JdbcUtil.dataSource);
String sql = "select * from area where cid = ?";
Object params[]={cid};
areas = runner.query(sql, new BeanListHandler<Area>(Area.class), params);
return areas;
}
}
還有三個province、city、area JavaBean類省略......
mysql連接使用c3p0連接池：
c3p0-config.xml：
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/ajax</property>
<property name="user">root</property>
<property name="password">root</property>
<property name="acquireIncrement">2</property>
<property name="initialPoolSize">5</property>
<property name="minPoolSize">1</property>
<property name="maxPoolSize">5</property>
</default-config>
</c3p0-config>
JdbcUtil.java：
package kerwin.utils;
import com.mchange.v2.c3p0.ComboPooledDataSource;
public class JdbcUtil {
public static ComboPooledDataSource dataSource = new ComboPooledDataSource();
public static ComboPooledDataSource getDataSource() {
return dataSource;
}
}