使用Ajax和Jquery配合資料庫實現下拉框的二級聯動

阿新 • • 發佈：2019-01-19

首先我們需要先建立好資料庫,將一些資料插入進去

需要兩張表:

province：省份表

city : 城市表

如圖:

然後再在java中建立相關的實體類與之對應

再然後，我們就能開始做jdbc的操作了

public class ConnectionFactory {
	private static String driver;
	private static String url;
	private static String user;
	private static String password;
	static {
		Properties prop = new Properties();
		//讀取檔案
		
		try {
			InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");
			
			prop.load(in);
			driver = prop.getProperty("jdbc.driver");
			url = prop.getProperty("jdbc.url");
			user = prop.getProperty("jdbc.user");
			password = prop.getProperty("jdbc.password");
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
	
	/**
	 * 獲取連線物件
	 * @return
	 */
	public  static  Connection getConnection(){
		Connection conn = null;
		
		try {
			Class.forName(driver);
			conn = DriverManager.getConnection(url, user, password);
			
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
		
		return conn;
	}
	
	/**
	 * 關閉資源
	 * @param conn
	 * @param pstmt
	 * @param stmt
	 * @param rs
	 */
	public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){
			
			try {
				if (conn != null) {	
					conn.close();
				}
				
				if (pstmt != null) {
					pstmt.close();
				}
				
				if (stmt != null) {
					stmt.close();
				}
				
				if (rs != null) {
					rs.close();
				}
			} catch (SQLException e) {
				throw new RuntimeException(e);
			}
		
	}

首先我們可以在頁面載入的時候獲取所有省份的資訊，SQL語句如下

Connection conn = null;
	PreparedStatement pstmt =  null;
	Province province2 = null;
	
	@Override
	public ArrayList<Province> findAllPro() {
		ResultSet rs = null;
		ArrayList<Province> pros = null;
		try {
			String sql = "select id,place from province";
			conn = ConnectionFactory.getConnection();
			pstmt = conn.prepareStatement(sql);
			pros = new ArrayList<Province>();
			
			rs = pstmt.executeQuery();
			
			while(rs.next()){
				Province province = new Province();
				province.setId(rs.getInt(1));
				province.setPlace(rs.getString(2));
				pros.add(province);
			}
			
		} catch (SQLException e) {
			throw new RuntimeException(e);
		}
		
		return pros;
	}

將查到的資料放到後臺,建立一個SelectedServlet類，用於接收查詢到的所有省份的資訊

response.setContentType("application/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		//建立一個Place物件
		ArrayList<Province> pros= new Place().findAllPro();
		PrintWriter out = response.getWriter();
		//將集合直接轉換為Json物件
		out.write(JSONArray.fromObject(pros).toString());

在這裡會用到集合轉換Json物件，我們需要匯入以下幾個包

然後我們開始寫前臺頁面:

<body>
  		省份:<select id="province">
  			<option>--請選擇省份--</option>
  		</select>
  		
  		城市:<select id="city">
  				<option>--請選擇城市--</option>
  			</select>
  		<br/><br/>
  		<span></span>
  </body>

然後jQuery程式碼如下:（由於我匯入的jQuery版本比較低，所以使用的方法是getJSON，而不是getJson）

$.getJSON("SelectedServlet",function(data,textStatus){
  	var provinces = data;
  					
  	var res = "";
  	for(var i =0;i<provinces.length;i++){
  	res += "<option>"+provinces[i].place+"</option>";
  	}
  		$("#province").append(res);
  	});

這樣就能在頁面載入的時候獲取到資料

然後我們再來做聯動，首先給下拉框新增一個change事件，然後獲取選中的資訊，將選中的資訊傳送到另一個CityServlet中

//下拉框改變時觸發的事件
 $("#province").change(function(){
  	var seled = $("option:selected").html();
  					
  	$("span").html(seled);
  	$.getJSON("CityServlet",{
  		"province":encodeURI(encodeURI(seled))
  					},function(data){
  		$("#city").html("");
  		var citys = data;
  		var res = "";
  		for(var i = 0;i<citys.length;i++){
  			res += "<option>"+citys[i].place+"</option>";
  		}
  		$("#city").append(res);
  	});
  					
 });

伺服器通過獲得的資訊通過sql語句查詢出來,SQL程式碼如下:

public ArrayList<City> findAllCityByPro(String name) {
		ResultSet rs = null;
		ArrayList<City> citys = null;
		try {
			//通過名字獲得所有值
			String sql = "select c.city_place from city c ,"
					+ "province p where c.province_id = "
					+ " (select id from province where place = '"+ name +"') "
					+ " and c.province_id = p.id";
			conn = ConnectionFactory.getConnection();
			pstmt = conn.prepareStatement(sql);
			citys = new ArrayList<City>();
			System.out.println(sql);
			rs = pstmt.executeQuery();
			
			while(rs.next()){
				City city = new City();
				city.setPlace(rs.getString(1));
				citys.add(city);
			}
			System.out.println(citys);
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return citys;
	}

將查詢到的資料傳送到後臺，後臺接收到資料後將其轉換為Json物件，並通過回撥函式傳送到前臺，然後前臺就可以通過事件直接獲取到資料，而不用各種跳轉頁面，這就是Ajax(Asynchronous Javascript And XML),

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");
//		String proName = "浙江";
		String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),
				"utf-8");
		ArrayList<City> citys= new Place().findAllCityByPro(proName);
		PrintWriter out = response.getWriter();
		out.write(JSONArray.fromObject(citys).toString());
		
	}

至於顯示頁面的程式碼也在前面寫到jQuery語句中了

效果如下:

使用Ajax和Jquery配合資料庫實現下拉框的二級聯動

首先我們需要先建立好資料庫,將一些資料插入進去需要兩張表: province：省份表 city : 城市表如圖: 然後再在java中建立相關的實體類與之對應再然後，我們就能開始做jdbc的操作了 public class ConnectionFa

js實現下拉框二級聯動

在做專案的時候，一個新增問題題目，選項和答案的問題，題目型別分為選擇題，判斷題，和多選題三種，此處需要新增一個二級聯動的功能，即當題型為選擇題的時候，正確選項的下拉框裡出現的是A,B,C,D.如果題型是判斷題，正確選項的下拉框內容為正確，錯誤，如果題型型別為多選題，則正確答案的輸入框變為可輸

jquery multiselect如何實現下拉框多選並獲取多個選項的值

今天做專案遇到了一個需要用多選框實現多選功能、並將多選框的值傳到後臺實現插入一張表的問題，最開始一直在想用複選框實現多選功能，後來發現做起來頁面不好看，最後在網上查資料，想找到一種方便使用的外掛，最後選擇了multiselect這個外掛。首先簡單說下我要實

JavaScript----下拉框二級聯動效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

struts2中用jquery、ajax實現下拉框的級聯

–這是剛學會的一個，從action中傳出json型別資料的字串，然後通過ajax再把字串解析出json物件。下面是大致的步驟。 1、post.jsp頁面在js中加入函式程式碼 <

vue和mintui-Loadmore結合實現下拉刷新，上拉加載（待優化）

res 延遲設置 body 轉換 ext over 開發體驗 mintui是餓了麽團隊針對vue開發的移動端組件庫，方便實現移動端的一些功能，這裏只用了Loadmore功能實現移動端的上拉分頁刷新，下拉加載數據.mintui官網：http://mint-ui.githu

java指令碼實現下拉框和文字框的資料交換

{ if(va.value==<%=a%>) str=' <input name="cnum" type="text" id="cnum" value

android實現下拉框和輸入框結合

1、如何實現：將一個EditText和ListView+PopupWindow 結合起來。自定義一個EditText，在自定義控制元件中用PopupWindow實現彈出ListView，已達到想要的效果。 2、需要的佈局： 1、EditText+ImageButton 的佈

Ajax實現下拉框地址切換

效果如下選擇新地址時清空表單，選擇某地址後自動填寫1、後端struts2 Action程式碼public String findAddr() throws IOException{ ServletResponse response = ServletActio

Jquery.sumoselect外掛實現下拉複選框

1、官方網站： https://hemantnegi.github.io/jquery.sumoselect/ 說明介紹網址 https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html dem

JQuery外掛iScroll實現下拉重新整理，滾動翻頁特效

初始化/** * 初始化iScroll控制元件 */ function loaded() { pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; p

vue實現下拉框全選和輸入匹配

實際專案中的一個需求：點選文字框，彈出帶有複選框的選項，然後獲取選中項的資料，傳給後面的一個功能。在文字框輸入內容，也會動態的匹配下拉列表，並且列表帶有全選功能。樸素的效果圖：我選擇了用vue實現，算是vue的一次練手吧。不會寫的地方也百度了一下。難點有兩個，

js實現下拉框模糊查詢

content body col con 下拉 gpo for lis OS keyup方法觸發模糊查詢 list : Array<any> //下拉列表所有內容 filtList：Array<any> //過濾後的內容 inputContent

angularJs實現下拉框多選

IV 幹貨 text 註意解釋 config del 是你 CA 話不多說，直接上幹貨。肯定需要下拉選插件。必須引入的是註意先後順序 select2.css select2-bootstrap.css select2.min.js angular.mi

jQuery滑鼠懸停展示下拉框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery實現懸停下拉選單</title> <style type="text/c

DJANGO實現下拉框的二級聯動

環境：PYTHON2.7+DJANGO1.9 有資料表如下，就是想在每次下拉框選擇dnsname欄位的時候，帶出對應的hostipaddr欄位實現如下 models.py from __future__ import unicode_literals from django

微信小程式如何實現下拉框效果？（程式碼示例）

wxml程式碼： <view class='top-text'> 選擇接收班級</view>  <view class='top-selected' bindtap='bindShowMsg'> <

使用JavaScript實現下拉列表的聯動

在設計使用者註冊頁面時經常有籍貫等資訊要填寫，填寫這些資訊一般都是先選擇國家->省->市->鎮。此篇主要講述，當第一個下拉列表中的內容選定之後第二個下拉列表中的內容也隨之改變（例如：當你第一個下拉列表選擇江西時，第二個下拉列表會顯示南昌贛州等城市；當你第

bootstrap-select外掛實現下拉框搜尋功能

工作上要用到在下拉框內實現搜尋功能，原生的select標籤是不能輸入的，所以最終找到了bootstrap-select外掛，功能十分強大，支援搜尋，多選，分組選中等。本文摘取自：官方文件簡單示例下面先附上我的程式碼，實現了搜尋功能，

jquery autocomplete 自動填充下拉框的使用之自定義資料顯示

官方的介紹地址為 http://jqueryui.com/autocomplete/ 本文對於簡單的使用不做介紹，僅僅介紹自定義資料結構如何進行顯示，在官方的demo中也有（http://www.jqueryui.org.cn/demo/5663.html），程式碼如下： <

使用Ajax和Jquery配合資料庫實現下拉框的二級聯動

相關推薦