V_1.0 准备工作:
#1.创建表 [城市信息表] [行政区信息表]
create table city(
cid int,
cname varchar(200),
pid int
);
create table qu(
qid int,
qname varchar(200),
cid int
);
2.制造测试数据
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,"海淀区",1);
insert into qu values(2,"廊坊区",2);
insert into qu values(3,"皇姑区",3);
insert into qu values(4,"甘井子区",4);
3.制造实体类
V_2.0 省市级联
1. index.jsp 添加findCity,用于将用户选择【省编号】通过代理对象发送到服务器端,
并接受结果，填充城市下拉列表
2. CityFindServlet:
1. 获得【省编号】
2. JDBC获得当前省拥有的所有的城市信息
3. 将【城市信息】交给【代理对象】
V_3.0 如何将JAVA中高级类型数据交给代理对象进行编译:
1.所有的编程语言，都拥有8中基本数据类型：
编程语言都需要在内存中运行，运行期间涉及的数据特征就必须符合内存条的要求。
所有内存厂商，都只支持8中基本数据类型
2.不同编程语言的基本数据类型，彼此之间是可以直接相互编译
3.由于不同编程语言描述各自高级类型时，使用描述方式是不同的，因此
不同编程语言之间高级类型是无法直接编译
4.javascript如何描述一个对象：JSON形式
var cityObj ={cid:"1",cname:"北京",pid:"1"}
5. java如何描述一个对象
City city = new City();
city.cid =1;
city.cname="北京"
6. 为了能够让【代理对象】正确编译高级类型
在服务器端，将JAVA修饰对象格式转变为JSON形式格式
V_3.1 城市和行政区下拉列表级联:与省市级联完全一致
V_4.0 如何实现真正三表级联:
1.上述的两个功能中，都是读取当前下拉表中选中代码：
欢迎页面：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
省
城市
行政区
web.xml
CityFindServlet
src.com.bjpowernode.action.CityFindServlet
QuFindServlet
src.com.bjpowernode.action.QuFindServlet
CityFindServlet
/city/find.do
QuFindServlet
/qu/find.do
index.jsp
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 cityList= new ArrayList();
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 cityList= new ArrayList();
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
搭建环境
- eclipse
- jdk1.8
- jetty（服务器）
- Dynamic Web Module 2.5
第二种js方式实现三级联动：
注意事项：
1、 需要引入jquery.js 插件。
2、特别值得注意的是：发送ajax的时候一定要加上dataType=“text”或者dataType=“html”。不加会出现浏览器解析的问题。如果不加
(1) 在Google Chrome中没有问题。
(2)在Firefox中不支持。返回的json数据会成了（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();
$("").appendTo($("#city"))
} else {
$("#city").empty();
var data = JSON.parse(data);
// var data = eval("("+msg+")");
/*$("").appendTo($("#district_id"));*/
for (var i = 0; i < data.length; i++) {
$("").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();
$("").appendTo($("#qu"))
} else {
$("#qu").empty();
var data = eval("("+msg+")");
// data = jQuery.parseJSON(msg);
/*$("").appendTo($("#district_id"));*/
for (var i = 0; i < data.length; i++) {
$("").appendTo($("#qu"));
}
}
}
});
}