AJAX+JSON 實現省市縣地名三級聯動

AJAX+JSON 實現省市縣地名三級聯動

本案例運用到三層架構（表現層，服務層、持久層）表現層呼叫服務層的方法，服務層呼叫持久層的方法，使用資料庫為Oracle資料庫，在資料庫中建立一張名為address的資料表。前前和後臺資料傳輸使用json方式（引入第三方工具Jackson）具體欄位和插入的資料如下

address.sql

<span style="font-family:Microsoft YaHei;font-size:18px;">CREATETABLE address (
id NUMBER(5), --地名編碼（唯一）
name VARCHAR2(45), --名字
grade NUMBER(1), --等級（0代表省，2代表市，3代表縣）
parentid NUMBER(5), --父級編碼,預設為0（0是頂級沒有父類）
CONSTRAINT pk_address_id PRIMARYKEY (id)
);
INSERTINTO address (id, name, grade, parentid) VALUES (1,'北京',0,0);
INSERTINTO address (id, name, grade, parentid) VALUES (2, '廣東'

, 0, 0);
INSERTINTO address (id, name, grade, parentid) VALUES (3, '深圳', 0, 2);
INSERTINTO address (id, name, grade, parentid) VALUES (4, '福田區', 0, 3);
INSERTINTO address (id, name, grade, parentid) VALUES (5, '廣州', 0, 2);
INSERTINTO address (id, name, grade, parentid) VALUES (6, '四川', 0, 0);</span>

資料庫資料如下：

建立一個js資料夾存放js檔案（需要引入json.js）：

專案結構如圖：

需要的包：

具體程式碼如下：

1、adress.jsp（顯示介面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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></title>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">
	
	/* 引數current表示當前操作的id,引數find表示將要檢視的下一級id */
	function findAdress(current, find) {
		/* 	獲得當前選中的地址的value值 */
		var p = document.getElementById(current);
		var id = p.value;

		/* 如果當前選中的地址是省，則先將市和縣的內容清空（只保留提示資訊） */
		if (current === "province") {
			var ct = document.getElementById("city");
			ct.options.length = 1;/* 為了保留提示資訊 */
			var co = document.getElementById("county");
			co.options.length = 1;/* 為了保留提示資訊 */
		}
		/* 如果當前選中的地址是市，則先縣的內容清空 （只保留提示資訊）*/
		if (current === "city") {
			var co = document.getElementById("county");
			co.options.length = 1;/* 為了保留提示資訊 */
		}

		/* 	獲得將要檢視的地址（市或者縣）*/
		var c = document.getElementById(find);

		/* 接下來的步驟為AJAX非同步查詢當前地址的下級地址（並將它們追加到下拉框中） */

		/* 步驟一：建立非同步引擎物件 */
		var xhr = new XMLHttpRequest();
		//步驟一：開啟引擎，method用於設定請求的方式：get或者post
		/* url設定請求的路徑，async設定是同步操作還是非同步操作，預設是ture(非同步) */
		xhr.open("post", "adress.do");
		/* 	Post方式請求要設定請求頭 */
		xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		/* 	傳送 */
		xhr.send("id=" + id);
		/* 步驟三：檢測引擎的狀態改變 */
		xhr.onreadystatechange = function() {
			/* 判斷響應是否已經接收完成和判斷是否正常響應 */
			if (xhr.readyState == 4 && xhr.status == 200) {
				/* 接收響應的字串資訊 */
				var result = xhr.responseText;
				//將list集合形式的json字串解析成了陣列
				var adrs = JSON.parse(result);
				//設定下拉列表的選項個數
				c.options.length = adrs.length + 1;
			
				for (var i = 0; i < adrs.length; i++) {
					c.options[i + 1].value = adrs[i].id;
					c.options[i + 1].text = adrs[i].name;
				}
			}
		}
	}
</script>
</head>
<body>
	<h1>省市縣三級聯動</h1>
	省:
	<select name="province" id="province"
		onchange="findAdress('province','city')">
		<option>----請選擇省----</option>
		<c:forEach items="${list }" var="a">
			<option value="${a.id }">${a.name }</option>
		</c:forEach>
	</select> 市:
	<select name="province" id="city"
		onchange="findAdress('city','county')">
		<option>----請選擇市----</option>

	</select> 縣:
	<select name="province" id="county">
		<option>----請選擇縣----</option>

	</select>
</body>
</html>

表現層：
2、AdressServlet.java

package cn.sz.hcq.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.codehaus.jackson.map.ObjectMapper;

import cn.sz.hcq.pojo.Adress;
import cn.sz.hcq.service.IAdressService;
import cn.sz.hcq.service.impl.AdressServiceImpl;

//用註解配置servlet
@WebServlet("/adress.do")
public class AdressServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		IAdressService adressService = new AdressServiceImpl();
		/* Post請求中文亂碼處理 */
		request.setCharacterEncoding("utf-8");
		// 響應中文亂碼處理
		response.setContentType("text/html;charset=UTF-8");
		// 獲取到當前地址的id
		String id = request.getParameter("id");
		// 如果為空，則說明是第一次請求，則顯示所有的省
		if (id == null || id.equals("")) {
			// 呼叫Service層方法獲取所有的省
			List<Adress> provinces = adressService.findAllProvinces();
			// 將資料繫結到request
			request.setAttribute("list", provinces);
			// 頁面轉發到adress.jsp
			request.getRequestDispatcher("adress.jsp").forward(request, response);
		} else {
			// 根據當前地址的id獲取他的下級地址（當前地址的id也就是下級地址的parentid）
			List<Adress> citys = adressService.findCitys(Integer.parseInt(id));
			
			// 建立實現轉換的物件
			ObjectMapper mapper = new ObjectMapper();
			// 將list集合轉換為json字串
			String str = mapper.writeValueAsString(citys);
			PrintWriter out = response.getWriter();
			System.out.println(str);
			out.flush();
			out.close();
		}
	}
}

持久層：

3、IAdressDAO.java （對應操作資料庫的方法）

<span style="font-family:Microsoft YaHei;font-size:18px;">publicinterface IAdressDAO {
// 查尋所有的省
public List<Adress> findAllProvinces();
// 根據當前選中地址的id查詢出他的下級地址
public List<Adress> findCitys(Integer id);
}
</span>

4、AdressDAOImpl.java (具體實現操作資料庫的方法)

<span style="font-family:Microsoft YaHei;font-size:18px;">publicclass AdressDAOImpl implements IAdressDAO {
public List<Adress> findAllProvinces() {
List<Adress> list = null;
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
list = new ArrayList<Adress>();
conn = DBUtils.getConn();
String sql = "select id,name,grade,parentid from address where grade=?";
ps = conn.prepareStatement(sql);
ps.setInt(1, 0);
rs = ps.executeQuery();
while (rs.next()) {
Adress a = new Adress();
a.setId(rs.getInt(1));
a.setName(rs.getString(2));
a.setGrade(rs.getInt(3));
a.setParentid(rs.getInt(4));
list.add(a);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtils.close(conn, ps, rs);
}
return list;
}
public List<Adress> findCitys(Integer id) {
List<Adress> list = null;
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
conn = DBUtils.getConn();
list = new ArrayList<Adress>();
String sql = "select id,name,grade,parentid from address where parentid=?";
ps = conn.prepareStatement(sql);
ps.setInt(1, id);
rs = ps.executeQuery();
while (rs.next()) {
Adress a = new Adress();
a.setId(rs.getInt(1));
a.setName(rs.getString(2));
a.setGrade(rs.getInt(3));
a.setParentid(rs.getInt(4));
list.add(a);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtils.close(conn, ps, rs);
}
return list;
}}</span>

服務層：

5、IAdressService.java （服務層介面定義方法）

<span style="font-family:Microsoft YaHei;font-size:18px;">publicinterface IAdressService {
public List<Adress> findAllProvinces();
public List<Adress> findCitys(Integer id);
相關推薦

AJAX+JSON 實現省市縣地名三級聯動

AJAX+JSON 實現省市縣地名三級聯動本案例運用到三層架構（表現層，服務層、持久層）表現層呼叫服務層的方法，服務層呼叫持久層的方法，使用資料庫為Oracle資料庫，在資料庫中建立一張名為address的資料表。前前和後臺資料傳輸使用json方式（引入第三

jquery ajax(2)-----獲取省市縣/區三級聯動

jquery ajax(2)—–獲取省市縣/區三級聯動（1） 1.jsp 頁面的jquery ajax：注意要引入jquery.min.js <script> $(function () { $("#provSelect").

實現JS中的省市縣的三級聯動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

JavaScript Ajax Json實現上下級下拉框聯動效果例項程式碼

最近嘗試做出一個部門和人員的下拉框聯動功能，部門和人員的對應關係是1:N 程式碼如下: <div class="forntName">部門</div> <div class="inpBox"> <select name="d

Ajax + JSON + Servlet + Oracle資料庫實現省市縣三級聯動效果

web.xml <servlet> <servlet-name>GetCity</servlet-name> <servlet-class>com.yyb.servlet.GetCity</ser

原生js使用ajax實現省市縣三級聯動

chang onchange mes ror charset += ctype type nload <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

PHP+ajax實現省市縣三級聯動

//首頁 <?php header('content-type:text/html;charset=utf-8');$conn=mysql_connect('localhost','root','')or die('資料庫連線失敗!');mysql_select_db

JSON+JS實現省市縣三級聯動下拉框

function Area(selector){ if (!Area.ALL_AREAS) { throw new Error('areas not init！'); } this.selector = selector; $(this.selecto

AJAX-簡單的省市縣三級聯動

rip cnblogs wid clas 指定聯動 ajax func 分享 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta c

jQuery實現省市縣三級聯動選單

使用JQuery實現的全國省市縣三級聯動選單，沒有使用ajax，資料也不是從資料庫中動態讀取出來的，就是簡單的jquery，方便實用，實現效果如下圖： 1、定義資料，我們可以將省、市、縣定義為一個js檔案中，分別為三個陣列存放，下面是舉例，所以只列出部分省、市、縣，全國

安卓基礎--三分鐘實現省市縣三級聯動

還記得之前課本上講的牛頓的那句名言吧？“如果我看得更遠一點的話,是因為我站在巨人的肩膀上。”所以說如果有巨人的肩膀還是要粘一下光的，哈哈。所以推薦一個非常好用的實現三級聯動的庫，有了這個，就可以三分鐘整合時間選擇器，省市縣選擇器。專案地址：https://g

android開發——用GridView實現省市縣三級聯動

前段時間寫了一個DEMO，裡面用到省市縣三級聯動的功能，稍微整理了一下。以下程式碼中大部分資料來源於網上的下拉列表的省市縣三級聯動的例子，這裡我作出了改動，用的是GridView來顯示省市縣，程式碼有點繁瑣，但是顯示效果還是不錯的。顯示效果如下圖所示：未點選按

php+vue.js 實現省市縣鄉的四級聯動（ajax載入）

（注：需要SQL的朋友請在評論區留下email）除了引入vue.js還需要引入vue的一個ajax庫：vue-resource html: <!DOCTYPE html><ht

Java框架SSH結合Easyui控制元件實現省市縣三級聯動示例解析

Easyui呼叫資料庫實現省市縣區三級聯動的效果如果下 1、首先要設計資料庫，如圖所示。一個有4個欄位code，note，pycode。code：行政區劃程式碼，note：中文註釋，pycode：拼音縮寫。其中code是由6個欄位組成。如果是省級最後4位是

Easyui實現省市縣三級聯動

Easyui呼叫資料庫實現省市縣區三級聯動的效果如果下 1、首先要設計資料庫，如圖所示。一個有4個欄位code，note，pycode。code：行政區劃程式碼，note：中文註釋，pycode：拼音縮寫。其中code是由6個欄位組成。如果是省級最後4位是00

ajax+json 實現三級聯動

ajax算是我自己前端學習程序的一個坎兒了。。同階段的小夥伴已經甩我一大段距離了慕課上《ajax全接觸》課程算是看了兩遍。第一遍可能是對前後的知識理解不夠，完全懵逼，雖然照著敲程式碼但是處於完全不懂

2017-6-6 Ajax版頁面無刷新三級聯動

實現 aps hid null .cn acl js代碼 classes nbsp 實現效果：頁面代碼： <div> <select id="sel1" style="width:100px;">

ajax結合php簡單的城市三級聯動

his function var option com quest .html model html //ajax代碼 $(‘#pro‘).change(function () { var id = $(this).val(); if (id

仿ios的省市縣3級聯動腳本一

可選 value 標題圖片 default 空格數據 cti happy 一，圖片實例二，代碼 2.1，代碼 $(‘#provinceCity_fu‘).click(function(){ var $this = $(this); new Picke

C#用ComboBox控件實現省與市的聯動效果的方法

cat 數據就是 mode var aio 默認 tchar bottom 本文實例講述了C#用ComboBox控件實現省與市的聯動效果的方法。分享給大家供大家參考。具體實現方法如下：代碼如下: using System; using System.Collec

AJAX+JSON 實現省市縣地名三級聯動

相關推薦