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() {
//首先載入省份
var province=$("#province");
var city=$("#city");
$.get("ProvinceServlet",function(data,textStatus){
var provinces=data.province;
for(var i=0;i<provinces.length;i++){
var pro=provinces[i];
var op=$("<option value=" +(i+1)+">"+pro.name+"</option>");
province.append(op);
}
},"json");
//選擇了省份後城市聯動
province.change(function(){
var index=this.value;
city.empty();
city.append("<option value=-1>--請選擇--</option>" );
if(index>0){
$.get("CityServlet",{
'id':index
},function(data,textStatus){
var cities=data.city;
for(var i=0;i<cities.length;i++){
var ct=cities[i];
var op=$("<option value="+i+">"+ct.name+"</option>");
city.append(op);
}
});
}else{
return;
}
});
});
</script>
</head>
<body>
省份:<select id="province">
<option>--請選擇--</option>
</select>
城市:<select id="city">
<option value="-1">--請選擇--</option>
</select>
</body>
服務端:
//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格式的也同樣可以,需要改動幾個地方。
如果有錯誤或者值得改進的地方,請各位大神指點。