ajax + servlet 實現三級聯動
阿新 • • 發佈：2019-02-05
create table province ( pid int, #省編號 主鍵 pname varchar(20) #省名稱 ); insert into province(pid,pname) values(1,'吉林省'); insert into province(pid,pname) values(2,'遼寧省'); insert into province(pid,pname) values(3,'山東省'); #--省下的城市 create table city ( cid int, #城市編號 cname varchar(20), #城市名稱 pid int #省的編號 對應province表的主鍵 ); insert into city(cid,cname,pid) values(1,'長春',1); insert into city(cid,cname,pid) values(2,'四平',1); insert into city(cid,cname,pid) values(3,'吉林市',1); insert into city(cid,cname,pid) values(4,'瀋陽',2); insert into city(cid,cname,pid) values(5,'大連',2); insert into city(cid,cname,pid) values(6,'鞍山',2); insert into city(cid,cname,pid) values(7,'濟南',3); insert into city(cid,cname,pid) values(8,'威海',3); insert into city(cid,cname,pid) values(9,'煙臺',3); #--城市下的縣 create table county #縣 ( tid int, #縣的編號 tname varchar(20), #縣的名稱 cid int #城市編號 對應city表的主鍵 ); insert into county(tid,tname,cid) values(1,'九臺',1); insert into county(tid,tname,cid) values(2,'農安',1); insert into county(tid,tname,cid) values(3,'梨樹',2); insert into county(tid,tname,cid) values(4,'公主嶺',2); insert into county(tid,tname,cid) values(5,'永吉',3);
package cn.itcast.util; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Properties; public class DBManager { private static String url; private static String username; private static String pwd; static { try { Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundException e1) { e1.printStackTrace(); } Properties p = new Properties(); try { p.load(DBManager.class.getClassLoader().getResourceAsStream( "jdbc.properties")); url = p.getProperty("url"); username = p.getProperty("username"); pwd = p.getProperty("pwd"); } catch (IOException e) { e.printStackTrace(); } } public static Connection getConn() { try { return DriverManager.getConnection(url, username, pwd); } catch (SQLException e) { e.printStackTrace(); } return null; } public static void close(Connection conn, Statement stmt, ResultSet rs) { try { if (conn != null) { conn.close(); conn = null; } } catch (SQLException e) { e.printStackTrace(); } finally { if(stmt!=null) { try { stmt.close(); stmt = null; } catch (SQLException e) { e.printStackTrace(); } finally { if(rs!=null) { try { rs.close(); rs = null; } catch (SQLException e) { e.printStackTrace(); } } } } } } }
url=jdbc:mysql://localhost:3306/ajax?useUnicode=true&characterEncoding=utf8
username=root
pwd=上邊是：/src/jdbc.properties 資料庫配置檔案 cn.itcast.web: 控制層
package cn.itcast.web; 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 net.sf.json.JSONArray; import cn.itcast.bean.Province; import cn.itcast.service.ProvinceService; public class ProvinceServlet extends HttpServlet { private ProvinceService ps = new ProvinceService(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); List<Province> list = ps.findProvinceList(); JSONArray jsonArray = JSONArray.fromObject(list); out.write(jsonArray.toString()); out.flush(); out.close(); } }
package cn.itcast.web;
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 net.sf.json.JSONArray;
import cn.itcast.bean.City;
import cn.itcast.service.CityService;
public class CityServlet extends HttpServlet {
private CityService cs = new CityService();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
int pid = Integer.parseInt(request.getParameter("pid"));
List<City> list = cs.findCityList(pid);
PrintWriter out = response.getWriter();
JSONArray ja = JSONArray.fromObject(list);
out.write(ja.toString());
out.flush();
out.close();
}
}
package cn.itcast.web;
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 net.sf.json.JSONArray;
import cn.itcast.bean.City;
import cn.itcast.bean.County;
import cn.itcast.service.CountyService;
public class CountyServlet extends HttpServlet {
private CountyService cs = new CountyService();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
int cid = Integer.parseInt(request.getParameter("cid"));
List<County> list = cs.findCountyList(cid);
PrintWriter out = response.getWriter();
JSONArray ja = JSONArray.fromObject(list);
out.write(ja.toString());
out.flush();
out.close();
}
}
cn.itcast.dao:服務層
package cn.itcast.service;
import java.util.List;
import cn.itcast.bean.Province;
import cn.itcast.dao.ProvinceDao;
public class ProvinceService {
private ProvinceDao dao = null;
public List<Province> findProvinceList() {
dao = new ProvinceDao();
return dao.findProvinceList();
}
}
package cn.itcast.service;
import java.util.List;
import cn.itcast.bean.City;
import cn.itcast.dao.CityDao;
public class CityService {
private CityDao dao = null;
public List<City> findCityList(int pid) {
dao = new CityDao();
return dao.findCityList(pid);
}
}
package cn.itcast.service;
import java.util.List;
import cn.itcast.bean.City;
import cn.itcast.bean.County;
import cn.itcast.dao.CityDao;
import cn.itcast.dao.CountyDao;
public class CountyService {
private CountyDao dao = null;
public List<County> findCountyList(int cid) {
dao = new CountyDao();
return dao.findCountyList(cid);
}
}
cn.itcast.dao:資料訪問層
package cn.itcast.dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.mysql.jdbc.PreparedStatement;
import cn.itcast.bean.Province;
import cn.itcast.util.DBManager;
public class ProvinceDao {
private Connection conn = null;
private PreparedStatement pstmt = null;
private ResultSet rs = null;
private List<Province> list = new ArrayList<Province>();
public List<Province> findProvinceList() {
conn = DBManager.getConn();
String sql = "select pid,pname from province";
try {
pstmt = (PreparedStatement) conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
Province p = new Province();
p.setPid(rs.getInt(1));
p.setPname(rs.getString(2));
list.add(p);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBManager.close(conn, pstmt, rs);
}
return list;
}
}
package cn.itcast.dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.mysql.jdbc.PreparedStatement;
import cn.itcast.bean.City;
import cn.itcast.bean.Province;
import cn.itcast.util.DBManager;
public class CityDao {
private Connection conn = null;
private PreparedStatement pstmt = null;
private ResultSet rs = null;
private List<City> list = new ArrayList<City>();
public List<City> findCityList(int pid) {
conn = DBManager.getConn();
String sql = "select cid,cname from city where pid="+pid;
try {
pstmt = (PreparedStatement) conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
City c = new City();
c.setCid(rs.getInt(1));
c.setCname(rs.getString(2));
list.add(c);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBManager.close(conn, pstmt, rs);
}
return list;
}
}
package cn.itcast.dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.mysql.jdbc.PreparedStatement;
import cn.itcast.bean.City;
import cn.itcast.bean.County;
import cn.itcast.bean.Province;
import cn.itcast.util.DBManager;
public class CountyDao {
private Connection conn = null;
private PreparedStatement pstmt = null;
private ResultSet rs = null;
private List<County> list = new ArrayList<County>();
public List<County> findCountyList(int cid) {
conn = DBManager.getConn();
String sql = "select tid,tname from county where cid="+cid;
try {
pstmt = (PreparedStatement) conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
County c = new County();
c.setTid(rs.getInt(1));
c.setTname(rs.getString(2));
list.add(c);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBManager.close(conn, pstmt, rs);
}
return list;
}
}
cn.itcast.bean: 模型層
package cn.itcast.bean;
public class Province {
private Integer pid;
private String pname;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
}
package cn.itcast.bean;
public class City {
private Integer cid;
private String cname;
private Integer pid;
public Integer getCid() {
return cid;
}
public void setCid(Integer cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
}
package cn.itcast.bean;
public class County {
private Integer tid;
private String tname;
private Integer cid;
public Integer getTid() {
return tid;
}
public void setTid(Integer tid) {
this.tid = tid;
}
public String getTname() {
return tname;
}
public void setTname(String tname) {
this.tname = tname;
}
public Integer getCid() {
return cid;
}
public void setCid(Integer cid) {
this.cid = cid;
}
}
html頁面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">請選擇....</option>
</select>
<select id="city" name="city">
<option value="">請選擇.....</option>
</select>
<select id="county" name="county">
<option value="">請選擇.....</option>
</select>
</body>
<script language="JavaScript">
/*
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
}
}
}
return xmlHttp;
};
*/
$().ready(function() {
$.post("./provinceServlet",function(data,textStatus){
var jsondata = eval("("+data+")");
//遍歷json物件
$(jsondata).each(function(index,domEle){
var $option = $("<option/>");
$option.attr("value",this.pid);
$option.text(this.pname);
$("#province").append($option);
});
});
//傳遞省pid，拿到對應的city
$("#province").change(function(){
$("#city option[value!='']").remove();
$("#county option[value!='']").remove();
var param = {"pid":$(this).val()};
$.post("./cityServlet",param,function(data,textStatus){
alert(data);
var jsonObj = eval("("+data+")");
$(jsonObj).each(function(){
var $option = $("<option/>");
$option.attr("value",this.cid);
$option.text(this.cname);
$("#city").append($option);
});
});
});
//傳遞市cid，拿到對應的county
$("#city").change(function(){
$("#county option[value!='']").remove();
//alert(this.value);
var param = {"cid":$(this).val()};
$.post("./countyServlet",param,function(data,textStatus){
//alert(data);
var jsondata = eval("("+data+")");
$(jsondata).each(function(index,domEle){
var $option = $("<option/>");
$option.attr("value",this.tid);
$option.text(this.tname);
$("#county").append($option);
});
});
});
})
</script>
</html>
用到了jquery, myeclipse---->WebRoot----->js--->jquery-1.4.2.js