jQuery與Ajax小練習-二級聯動（從Oracle資料庫獲取資料）
阿新 • • 發佈：2019-02-06
之前做了個簡單的二級聯動小練習，這次算是加強版的吧，希望能對大家有點用處。
//主頁面
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 服務端：
//ProvinceServlet的doGet方法
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter pw=response.getWriter();
String provinces=Source.getProvince();
pw.println(provinces);
pw.close();
}
//CityServlet的doGet方法
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
//設定接收資料的編碼
request.setCharacterEncoding("utf-8");
PrintWriter pw=response.getWriter();
//得到客戶端傳來的省份id
String id=request.getParameter("id");
//這裡是呼叫了自己寫的getCity方法得到jSon格式的城市名
String cities=Source.getCity(Integer.parseInt(id));
pw.println(cities);
pw.close();
}資料庫JDBC
//工廠類，獲取Connection
public class ConnectionFactory {
private static String DRIVER;
private static String URL;
private static String USER;
private static String PASSWORD;
static{
//例項化一個properties物件
Properties pro=new Properties();
//讀取jdbc.properties中的資料，properties檔案的編寫部落格中有，就不說了，望諒解
InputStream in=ConnectionFactory.class.getResourceAsStream("jdbcinfo.properties");
//pr載入讀取的資料
try {
pro.load(in);
DRIVER=pro.getProperty("jdbc.driver");
URL=pro.getProperty("jdbc.url");
USER=pro.getProperty("jdbc.user");
PASSWORD=pro.getProperty("jdbc.password");
in.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static Connection getConnection(){
Connection conn=null;
try {
Class.forName(DRIVER);
//建立連線
conn=DriverManager.getConnection(URL, USER, PASSWORD);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
}//獲得資料的Source類，從資料庫取得資料，寫成JSon格式的字串返回
public class Source {
//得到省份
public static String getProvince(){
StringBuffer provinces = new StringBuffer("{\"province\":[");
Connection conn=ConnectionFactory.getConnection();
PreparedStatement pstmt=null;
ResultSet rs=null;
String selectString="select count(name) from province";
try {
pstmt=conn.prepareStatement(selectString);
rs=pstmt.executeQuery();
rs.next();
int num=rs.getInt(1);
selectString="select name from province";
pstmt=conn.prepareStatement(selectString);
rs=pstmt.executeQuery();
for(int i=1;i<num;i++){
rs.next();
provinces.append("{\"name\":\""+rs.getString("name")+"\"},");
}
rs.next();
provinces.append("{\"name\":\""+rs.getString("name")+"\"}]}");
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
DBUtil.close(conn, null, pstmt, rs);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//返回的是字串
return provinces.toString();
}
//得到城市
public static String getCity(int proId){
StringBuffer cities=new StringBuffer("{\"city\":[");
Connection conn=ConnectionFactory.getConnection();
PreparedStatement pstmt=null;
ResultSet rs=null;
String selectString="select count(name) from city where pro_id="+proId;
try {
pstmt=conn.prepareStatement(selectString);
rs=pstmt.executeQuery();
rs.next();
int num=rs.getInt(1);
selectString="select name from city where pro_id="+proId;
pstmt=conn.prepareStatement(selectString);
rs=pstmt.executeQuery();
for(int i=1;i<num;i++){
rs.next();
cities.append("{\"name\":\""+rs.getString("name")+"\"},");
}
rs.next();
cities.append("{\"name\":\""+rs.getString("name")+"\"}]}");
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
DBUtil.close(conn, null, pstmt, rs);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return cities.toString();
}
}
資料庫中就是建立了兩個表
province表
id number(10) primary key
name varchar2(30)
city表
id number(10) primary key
pro_id number(10)
name varchar2(30)
這樣，利用jQuery和Ajax還有JDBC技術的二級聯動就實現了，當然，除了jSon格式，html和xml格式的也同樣可以，需要改動幾個地方。
如果有錯誤或者值得改進的地方，請各位大神指點。