省市級聯查詢實例：JDBC+Servlet+JSP+JSON+jQuery+Ajax
兩個實體類就不寫了
Province(Integer id, String name, String jiancheng, String shenghui)
City(Integer id, String name, Integer provinceId)
下面是DAO
package com.luna.dao;
//這裏用了自己寫的JDBC工具類
public class QueryDao {
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
//查詢所有的省份信息
public List<Province> provinceQuery(){
String sql="select * from province";
List<Province> list=new ArrayList<>();
try {
conn=JDBCUtil.getConnection();
ps= conn.prepareStatement(sql);
rs=ps.executeQuery();
while (rs.next()){
Integer id=rs.getInt("id");
String name=rs.getString("name");
String jiancheng=rs.getString("jiancheng");
String shenghui=rs.getString("name");
Province province=new Province(id,name,jiancheng,shenghui);
list.add(province);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(conn,ps,rs);
}
return list;
}
//根據省份查詢所有的城市信息
public List<City> cityQuery(Integer provinceId){
String sql="select * from city where provinceId=?";
List<City> list=new ArrayList<>();
try {
conn=JDBCUtil.getConnection();
ps= conn.prepareStatement(sql);
ps.setInt(1,provinceId);
rs=ps.executeQuery();
while (rs.next()){
Integer id=rs.getInt("id");
String name=rs.getString("name");
City city=new City(id,name,provinceId);
list.add(city);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(conn,ps,rs);
}
return list;
}
}
ProvinceQueryServlet+CityQueryServlet
public class ProvinceQueryServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String json="{}";
QueryDao queryDao=new QueryDao();
List<Province> list=queryDao.provinceQuery();
//把list轉爲json格式的數據 輸出給ajax請求
if(null!=list){
ObjectMapper om=new ObjectMapper();
json=om.writeValueAsString(list);
}
//輸出json數據 響應ajax請求 返回數據
response.setContentType("application/json;charset=utf-8");
PrintWriter pw=response.getWriter();
pw.write(json);
pw.flush();
pw.close();
}
}
public class CityQueryServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String provinceId=request.getParameter("provinceId");
if(provinceId !=null && provinceId.trim().length()>0){//得到的參數不爲空
String json="{}";
QueryDao dao=new QueryDao();
List<City> list= dao.cityQuery(Integer.valueOf(provinceId));
if(null!=list){
ObjectMapper om=new ObjectMapper();
json=om.writeValueAsString(list);
}
response.setContentType("application/json;charset=utf-8");
PrintWriter pw=response.getWriter();
pw.write(json);
pw.flush();
pw.close();
}
}
}
JSP頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市級聯查詢</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){//頁面的dom對象加載成功後執行
$.ajax({
url:"provinceQuery",
dataType:"json",
success:function(resp) {//pw向頁面輸出什麼 這裏的形參就是什麼 resp就是json數據
//每次點擊按鈕 就會執行一次append 這是不正確的 因此需要把之前的數據清空
$("#province").empty();
//遍歷resp i是循環變量 n是每次循環的值resp[i]
$.each(resp,function(i,n){
//向下拉列表追加option 放入得到的resp 也就是json值
$("#province").append("<option value='"+n.id+"'>"+n.name+"</option>");
})
}
})
//給省份的select綁定change事件 當select內容發生變化時 觸發該事件
$("#province").change(function(){
var $obj=$("#province>option:selected");
//alert($obj.val()+"==="+$obj.text());//點擊河北 alert 1===河北
var provinceId=$obj.val();
//做一個ajax請求 使用post函數(請求地址，請求參數，處理函數，數據格式)
$.post("cityQuery",{provinceId:provinceId},callback,"json");
})
function callback(resp) {
$("#city").empty();
$.each(resp,function (i,n){
$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
})
}
})
</script>
<div>
<table>
<tr>
<td>省份:</td>
<td>
<select id="province">
<option value="0">--請選擇--</option>
</select>
</td>
<td>
<input type="button" value="load數據" id="btnLoad">
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select id="city">
<option value="0">--請選擇--</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>