有關於用java實現ajax的省市聯動
ajax這種東西自己不想說了 百度一下有很多 寫這個也是感覺做這個複習了很多知識 有必要記錄一下（本人只是實習生一枚）
首先要寫一個jsp（其實也是找了很多資料才完成的）
<%@ page language="java" import="java.util.*,com.dao.*,com.vo.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% //這個是呼叫dao層返回省表中的內容。
UserDao ud=new UserDao();
ArrayList<Sheng> list=(ArrayList)ud.select();
%>
<!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>Insert title here</title>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<form action="" method="post" name="form1">
<select id="slt1" onchange="updateSelect()">
<option>請選擇省份</option>
<%
Sheng sheng=null;
for(int i = 0;i<list.size();i++){
sheng=(Sheng)list.get(i);
%>
<option value="<%=sheng.getId()%>"><%=sheng.getName() %></option>
<%
}
%>
</select>
<select id="slt2">
<option value="">請選擇城市</option>
</select>
</form>
</body>
</html>
這裡首先需要在dao裡找到sheng表中的資訊，所以當然啦 還要建一個sheng的表，還要寫一個jdbc連線資料庫
連線資料庫程式碼：public class DBUtil {
/**
* @return conn
* @throws ClassNotFoundException ClassNotFoundException
* @throws SQLException SQLException
*/
public static Connection getConnection() throws ClassNotFoundException, SQLException {
Connection conn = null;
Class.forName("oracle.jdbc.driver.OracleDriver");// 例項化oracle資料庫驅動程式(建立中介軟體)
String url = "jdbc:oracle:thin:@localhost:1521:xe";// @localhost為伺服器名，xe為資料庫例項名
conn = DriverManager.getConnection(url, "1", "2");// 連線資料庫，1代表帳戶,2代表密碼
return conn;
}
}
例項名一點要找對！！！困擾我好久，資料庫可直接檢視！！！
再就是dao層程式碼：public ArrayList<Sheng> select() throws ClassNotFoundException,
SQLException {
Connection conn = DBUtil.getConnection();
// 建立Statement
Statement s = conn.createStatement();
// 執行SQL語句
String sql = "select * from sheng";
// 處理結果集
ResultSet rs = s.executeQuery(sql);
ArrayList<Sheng> list = new ArrayList<Sheng>();
while (rs.next()) {
Sheng s1 = new Sheng();
s1.setId(rs.getString("id"));
s1.setName(rs.getString("name"));
list.add(s1);
}
// 關閉
rs.close();
s.close();
conn.close();
return list;
}這是查詢sheng表中的資料
在jsp中通過
<% //這個是呼叫dao層返回省表中的內容。
UserDao ud=new UserDao();
ArrayList<Sheng> list=(ArrayList)ud.select();
%>找到
點選下拉框中的隨便一個省，促發onchange="updateSelect()"中的時間到js中
js程式碼：
//訪問瀏覽器的設定 因為現在ie5.6基本不存在直接省略了那兩個版本的XMLRequest
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function createAjaxObj() {
var httprequest = false;
if (window.XMLHttpRequest) {
httprequest = new XMLHttpRequest();
if (httprequest.overrideMimeType) {
httprequest.overrideMimeType("text/xml");
}
} else {
if (window.ActionXObject) {
try {
httprequest = new ActionXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httprequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
return httprequest;
}
var httpReq = createAjaxObj();
function updateSelect() {
getXmlHttpRequestObject();
var selected = document.all.slt1.value;
httpReq.onreadystatechange = checkReqCallBack;
httpReq.open("GET", "testU?tid=" + selected, true);
httpReq.onreadystatechange = function() {
checkReqCallBack();
};
httpReq.send(null);
}
function checkReqCallBack() {
if (httpReq.readyState == 4) {
if (httpReq.status == 200) {
var xmlDoc = httpReq.responseXML.documentElement;// 獲得返回的XML文件
var xSel = xmlDoc.getElementsByTagName('select');// 獲得XML文件中的所有<select>標記
var select_root = document.getElementById('slt2');// 獲得網頁中的第二個下拉框
select_root.options.length = 0; // 每次獲得新的資料的時候先把每二個下拉框架的長度清0
for (var i = 0; i < xSel.length; i++) {
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;// 獲得每個<select>標記中的第一個標記的值,也就是<value>標記的值
var xText = xSel[i].childNodes[1].firstChild.nodeValue;// 獲得每個<select>標記中的第二個標記的值,也就是<text>標記的值
var option = new Option(xText, xValue);// 根據每組value和text標記的值建立一個option物件
try {
select_root.add(option);// 將option物件新增到第二個下拉框中
} catch (e) {
}
}
} else {
alert("不能得到描述資訊:" + httpReq.statusText);
}
}
}
httpReq.open("GET", "testU?tid=" + selected, true);這句話是和servlet的連線 將得到的tid傳給你的servlet，我的servlet叫TestU
servlet程式碼：package com.dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import com.tools.DBUtil;
import com.vo.Sheng;
import com.vo.Shi;
/**
* UserDao
*/
public class UserDao {
/**
* @return list
* @throws ClassNotFoundException ClassNotFoundException
* @throws SQLException SQLException
*/
public ArrayList<Sheng> select() throws ClassNotFoundException,
SQLException {
Connection conn = DBUtil.getConnection();
// 建立Statement
Statement s = conn.createStatement();
// 執行SQL語句
String sql = "select * from sheng";
// 處理結果集
ResultSet rs = s.executeQuery(sql);
ArrayList<Sheng> list = new ArrayList<Sheng>();
while (rs.next()) {
Sheng s1 = new Sheng();
s1.setId(rs.getString("id"));
s1.setName(rs.getString("name"));
list.add(s1);
}
// 關閉
rs.close();
s.close();
conn.close();
return list;
}
/**
* @param tid tid
* @return list
* @throws ClassNotFoundException ClassNotFoundException
* @throws SQLException SQLException
*/
public ArrayList<Shi> check(String tid) throws ClassNotFoundException,
SQLException {
Connection conn = DBUtil.getConnection();
// 建立Statement
Statement s = conn.createStatement();
// 執行SQL語句
String sql = "select * from shi where id=" + tid;
// 處理結果集
ResultSet rs = s.executeQuery(sql);
ArrayList<Shi> list = new ArrayList<Shi>();
while (rs.next()) {
Shi s1 = new Shi();
s1.setId(rs.getString("id"));
s1.setName(rs.getString("name"));
list.add(s1);
}
// 關閉
rs.close();
s.close();
conn.close();
return list;
}
}
採用的是xml解析方式將資料返還給js，但是接收到資料時，還需要呼叫dao層（至於web。xml中關於servlet的配置，就不說了，沒有不會的吧）
dao層中市的查詢：public ArrayList<Shi> check(String tid) throws ClassNotFoundException,
SQLException {
Connection conn = DBUtil.getConnection();
// 建立Statement
Statement s = conn.createStatement();
// 執行SQL語句
String sql = "select * from shi where id=" + tid;
// 處理結果集
ResultSet rs = s.executeQuery(sql);
ArrayList<Shi> list = new ArrayList<Shi>();
while (rs.next()) {
Shi s1 = new Shi();
s1.setId(rs.getString("id"));
s1.setName(rs.getString("name"));
list.add(s1);
}
// 關閉
rs.close();
s.close();
conn.close();
return list;
}
js通過shi的id返還資料到jsp中就成功了
實現的截圖就不發了 太簡陋 不好意思發！