V_1.0 準(zhǔn)備工作:
#1.創(chuàng)建表 [城市信息表] [行政區(qū)信息表]
create table city(
cid int,
cname varchar(200),
pid int
);
create table qu(
qid int,
qname varchar(200),
cid int
);
2.制造測試數(shù)據(jù)
insert into city values(1,"北京市",1);
insert into city values(2,"廊坊市",1);
insert into city values(3,"沈陽市",2);
insert into city values(4,"大連市",2);
insert into qu values(1,"海淀區(qū)",1);
insert into qu values(2,"廊坊區(qū)",2);
insert into qu values(3,"皇姑區(qū)",3);
insert into qu values(4,"甘井子區(qū)",4);
3.制造實(shí)體類
V_2.0 省市級聯(lián)
1. index.jsp 添加findCity,用于將用戶選擇【省編號】通過代理對象發(fā)送到服務(wù)器端,
并接受結(jié)果，填充城市下拉列表
2. CityFindServlet:
1. 獲得【省編號】
2. JDBC獲得當(dāng)前省擁有的所有的城市信息
3. 將【城市信息】交給【代理對象】
V_3.0 如何將JAVA中高級類型數(shù)據(jù)交給代理對象進(jìn)行編譯:
1.所有的編程語言，都擁有8中基本數(shù)據(jù)類型：
編程語言都需要在內(nèi)存中運(yùn)行躏率，運(yùn)行期間涉及的數(shù)據(jù)特征就必須符合內(nèi)存條的要求。
所有內(nèi)存廠商浪腐，都只支持8中基本數(shù)據(jù)類型
2.不同編程語言的基本數(shù)據(jù)類型，彼此之間是可以直接相互編譯
3.由于不同編程語言描述各自高級類型時(shí)顿乒，使用描述方式是不同的议街，因此
不同編程語言之間高級類型是無法直接編譯
4.javascript如何描述一個(gè)對象：JSON形式
var cityObj ={cid:"1",cname:"北京",pid:"1"}
5. java如何描述一個(gè)對象
City city = new City();
city.cid =1;
city.cname="北京"
6. 為了能夠讓【代理對象】正確編譯高級類型
在服務(wù)器端，將JAVA修飾對象格式轉(zhuǎn)變?yōu)镴SON形式格式
V_3.1 城市和行政區(qū)下拉列表級聯(lián):與省市級聯(lián)完全一致
V_4.0 如何實(shí)現(xiàn)真正三表級聯(lián):
1.上述的兩個(gè)功能中璧榄，都是讀取當(dāng)前下拉表中選中<option>來獲得隸屬于當(dāng)前數(shù)據(jù)的內(nèi)容
2.瀏覽器加載下拉列表時(shí)特漩，默認(rèn)情況將下拉列表中第一個(gè)<option>作為默認(rèn)選中項(xiàng)吧雹。
瀏覽器將當(dāng)前<option value>自動(dòng)賦值給當(dāng)前的下拉列表
代碼：
歡迎頁面：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<script type="text/javascript">
function findCity(){
var pid = document.getElementById("province").value;
if(pid==0){
alert("請選擇具體的省");
return;
}
// 1. 獲得當(dāng)前瀏覽器【代理對象】
var xmlHttp = new XMLHttpRequest();
// 2.初始化【代理對象】
xmlHttp.open("get","/city/find.do?pid="+pid,true);
// 3.通知【代理對象】發(fā)送請求
xmlHttp.send();
// 4.實(shí)時(shí)監(jiān)控【代理對象】工作狀態(tài)，決定何時(shí)讀取服務(wù)器端返回的數(shù)據(jù)
xmlHttp.onreadystatechange = function (){
if(xmlHttp.readyState == 4){
// 5...........................................獲得服務(wù)器端的數(shù)據(jù)
var jsonData = xmlHttp.responseText; //json形式的字符串 "[{},{}]"
//alert("jsonData "+jsonData);
// 將JSON形式字符串涂身，轉(zhuǎn)換成一個(gè)真正的JSON形式對象
// eval()
var jsonObj = eval("{"+jsonData+"}");//[cid:xx,cname:xx;cid:xx,cname:xx]
// alert("jsonObj "+jsonObj);
//將返回的數(shù)據(jù)雄卷，填充到城市下拉列表--------------start
//1.將當(dāng)前城市下拉列表原有的<option>銷毀掉
document.getElementById("city").options.length = 0;
//2.將新的數(shù)據(jù)，生成<option>,并填充到下拉列表
for(var i=0;i<jsonObj.length;i++){
//jsonObj[i].cid
//jsonOjb[i].cname
//<option value="xxx">顯示內(nèi)容</option>
//var optionObj = new Option(顯示內(nèi)容,value);
var optionObj = new Option(jsonObj[i].cname,jsonObj[i].cid);
document.getElementById("city").options.add(optionObj);
}
//將返回的數(shù)據(jù)蛤售，填充到城市下拉列表--------------end
//此時(shí)城市下拉列表中丁鹉，已經(jīng)有了value，就將這個(gè)value發(fā)送到服務(wù)器端悴能，獲得當(dāng)前城市擁有的行政區(qū)
findQu();
}
};
}
//根據(jù)城市編號揣钦，查詢對應(yīng)行政區(qū)
function findQu(){
var cid = document.getElementById("city").value;
if(cid==0){
alert("請選擇具體的城市");
return;
}
// 1. 獲得當(dāng)前瀏覽器【代理對象】
var xmlHttp = new XMLHttpRequest();
// 2.初始化【代理對象】
xmlHttp.open("get","/qu/find.do?cid="+cid,true);
// 3.通知【代理對象】發(fā)送請求
xmlHttp.send();
// 4.實(shí)時(shí)監(jiān)控【代理對象】工作狀態(tài)，決定何時(shí)讀取服務(wù)器端返回的數(shù)據(jù)
xmlHttp.onreadystatechange = function (){
if(xmlHttp.readyState == 4){
// 5...........................................獲得服務(wù)器端的數(shù)據(jù)
var jsonData = xmlHttp.responseText; //json形式的字符串 "[{},{}]"
//alert("jsonData "+jsonData);
// 將JSON形式字符串漠酿，轉(zhuǎn)換成一個(gè)真正的JSON形式對象
// eval()
var jsonObj = eval("{"+jsonData+"}");//[qid:xx,1name:xx;qid:xx,qname:xx]
// alert("jsonObj "+jsonObj);
//將返回的數(shù)據(jù)冯凹，填充到城市下拉列表--------------start
//1.將當(dāng)前城市下拉列表原有的<option>銷毀掉
document.getElementById("qu").options.length = 0;
//2.將新的數(shù)據(jù)，生成<option>,并填充到下拉列表
for(var i=0;i<jsonObj.length;i++){
//jsonObj[i].cid
//jsonOjb[i].cname
//<option value="xxx">顯示內(nèi)容</option>
//var optionObj = new Option(顯示內(nèi)容,value);
var optionObj = new Option(jsonObj[i].qname,jsonObj[i].qid);
document.getElementById("qu").options.add(optionObj);
}
//將返回的數(shù)據(jù)炒嘲，填充到城市下拉列表--------------end
}
};
}
</script>
<center>
省<select id="province" onchange="findCity()">
<option value="0">請選擇</option>
<option value="1">河北省</option>
<option value="2">遼寧省</option>
</select><br/>
城市<select id="city" onchange="findQu()">
<option value="0">請選擇</option>
</select> <br/>
行政區(qū)<select id="qu">
<option value="0">請選擇</option>
</select> <br/>
</center>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
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_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>CityFindServlet</servlet-name>
<servlet-class>src.com.bjpowernode.action.CityFindServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>QuFindServlet</servlet-name>
<servlet-class>src.com.bjpowernode.action.QuFindServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CityFindServlet</servlet-name>
<url-pattern>/city/find.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>QuFindServlet</servlet-name>
<url-pattern>/qu/find.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
java代碼1：
package src.com.bjpowernode.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import src.com.bjpowernode.entity.City;
public class CityFindServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String sql="select * from city where pid=?";
Connection con=null;
PreparedStatement ps=null;
ResultSet rs=null;
List<City> cityList= new ArrayList<City>();
String pid = request.getParameter("pid");
try{
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
ps = con.prepareStatement(sql);
ps.setInt(1, Integer.valueOf(pid));
rs=ps.executeQuery();
}catch(Exception ex){
ex.printStackTrace();
}
try{
while(rs.next()){
City city = new City();
city.setCid(rs.getInt("cid"));
city.setCname(rs.getString("cname"));
city.setPid(rs.getInt("pid"));
cityList.add(city);
}
}catch(Exception ex){
ex.printStackTrace();
}
JSONArray jsonData=JSONArray.fromObject(cityList);
// System.out.println(jsonData);
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
out.print(jsonData);
}
}
java代碼2：
package src.com.bjpowernode.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import src.com.bjpowernode.entity.City;
public class CityFindServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String sql="select * from city where pid=?";
Connection con=null;
PreparedStatement ps=null;
ResultSet rs=null;
List<City> cityList= new ArrayList<City>();
String pid = request.getParameter("pid");
try{
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
ps = con.prepareStatement(sql);
ps.setInt(1, Integer.valueOf(pid));
rs=ps.executeQuery();
}catch(Exception ex){
ex.printStackTrace();
}
try{
while(rs.next()){
City city = new City();
city.setCid(rs.getInt("cid"));
city.setCname(rs.getString("cname"));
city.setPid(rs.getInt("pid"));
cityList.add(city);
}
}catch(Exception ex){
ex.printStackTrace();
}
JSONArray jsonData=JSONArray.fromObject(cityList);
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
out.print(jsonData);
}
}
jar包
下載鏈接：http://note.youdao.com/groupshare/?token=A15DB4EF63DA4FC78B1F53ADE63C8114&gid=27180369
- mysql-connector-java-5.1.25.jar
- json-lib-2.3-jdk15.jar
- commons-collections-3.2.2.jar
- commons-beanutils-1.3.jar
- commons-lang-1.0.1.jar
- ezmorph-1.0.2.jar
- commons-logging-1.2.jar
搭建環(huán)境
- eclipse
- jdk1.8
- jetty（服務(wù)器）
- Dynamic Web Module 2.5
第二種js方式實(shí)現(xiàn)三級聯(lián)動(dòng)：
注意事項(xiàng)：
1宇姚、 需要引入jquery.js 插件。
2夫凸、特別值得注意的是：發(fā)送ajax的時(shí)候一定要加上dataType=“text”或者dataType=“html”浑劳。不加會(huì)出現(xiàn)瀏覽器解析的問題。如果不加
(1) 在Google Chrome中沒有問題夭拌。
(2)在Firefox中不支持魔熏。返回的json數(shù)據(jù)會(huì)成了（Object xmlDocument）
$("#province").change(function(){
var province = $("#province").val();
loadCity(province);
})
function loadCity(msg){
$.ajax({
url:"/city/find.do?",
type:"post",
data:{"pid":msg},
dataType:'text',
success:function(data){
if (data == "[]") {
$("#city").empty();
$("<option value='0'>請輸入城市</option>").appendTo($("#city"))
} else {
$("#city").empty();
var data = JSON.parse(data);
// var data = eval("("+msg+")");
/*$("<option value='' selected='selected' >請選擇市</option>").appendTo($("#district_id"));*/
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i].cid + "'>" + data[i].cname
+ "</option>").appendTo($("#city"));
}
chushihua()
}
}
});
}
$("#city").change(function(){
var province = $("#city").val();
loadCity1(province);
})
function chushihua(){
if($("#city").val()!=''){
loadCity1($("#city").val())
}
}
function loadCity1(msg){
$.ajax({
url:"/qu/find.do",
type:"post",
data:{"cid":msg},
dataType:'html',
success:function(msg){
if (msg == "[]") {
$("#qu").empty();
$("<option value='0'>請輸入城市</option>").appendTo($("#qu"))
} else {
$("#qu").empty();
var data = eval("("+msg+")");
// data = jQuery.parseJSON(msg);
/*$("<option value='' selected='selected' >請選擇市</option>").appendTo($("#district_id"));*/
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i].qid + "'>" + data[i].qname
+ "</option>").appendTo($("#qu"));
}
}
}
});
}
