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

阿新 • • 發佈：2019-02-08

web.xml

<servlet>
      <servlet-name>GetCity</servlet-name>
      <servlet-class>com.yyb.servlet.GetCity</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>GetCity</servlet-name>
      <url-pattern>/getCity</url-pattern>
  </servlet-mapping>

index.jsp

<%@page import="com.yyb.po.Region"%>
<%@page import="java.util.List"%>
<%@page import="com.yyb.dao.impl.ProvinceDaoImpl"%>
<%@page import="com.yyb.dao.ProvinceDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
	ProvinceDao pdao=new ProvinceDaoImpl();
	List<Region> regions=pdao.findAllProvince();
	request.setAttribute("regions", regions);
%>

<!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/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#province").change(function(){
			var provinceId=$("#province").val();
			$.ajax({
				type:"post",
				url:"getCity",
				data:"provinceId="+provinceId,
				success:function(msg){
					var city=JSON.parse(msg);
					if(city.resultCode==0){
						var provinceArry=city.rs;
		                $("#city").get(0).options.length=provinceArry.length+1;
		                $("#city").get(0).options[0]=new Option("請選擇",0);
		                for(var i=0;i<provinceArry.length;i++){  
		                    $("#city").get(0).options[i+1]=new Option( provinceArry[i].region_name, provinceArry[i].region_id);
		                }
					}else{
						alert("未知錯誤！");
					}
				}
			});
		});
		$("#city").change(function(){
			var provinceId=$("#city").val();
			$.ajax({
				type:"post",
				url:"getCity",
				data:"provinceId="+provinceId,
				success:function(msg){
					var city=JSON.parse(msg);
					if(city.resultCode==0){
						var provinceArry=city.rs;
		                $("#county").get(0).options.length=provinceArry.length+1;
		                $("#county").get(0).options[0]=new Option("請選擇",0);
		                for(var i=0;i<provinceArry.length;i++){  
		                    $("#county").get(0).options[i+1]=new Option( provinceArry[i].region_name, provinceArry[i].region_id);
		                }
					}else{
						alert("未知錯誤！");
					}
				}
			});
		});
	});
</script>
</head>
<body>
	請選擇：
	<select id="province">
		<c:forEach items="${regions}" var="r">
			<option value="${r.region_id}">${r.region_name}</option>
		</c:forEach>
	</select>
	<select id="city"></select>
	<select id="county"></select>
</body>
</html>

DBUtil.java

package com.yyb.utils;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBUtil {
	private static final String DRIVER = "oracle.jdbc.OracleDriver";
	private static final String URL = "jdbc:oracle:thin:@127.0.0.1:1521:orcl";
	private static final String USER = "scott";
	private static final String PASSWORD = "tiger";

	public static Connection getConnection() {
		Connection conn = null;
		try {
			Class.forName(DRIVER);
			conn = DriverManager.getConnection(URL, USER, PASSWORD);
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}

	public static void close(ResultSet rs, Statement stmt, Connection conn) {
		if (rs != null) {
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		if (stmt != null) {
			try {
				stmt.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		if (conn != null) {
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}
	
	public static void main(String[] args) {
		System.out.println(DBUtil.getConnection());
	}

}

Region.java

package com.yyb.po;

public class Region {
	private int region_id; // 行政區劃id
	private String region_code; // 行政區劃程式碼
	private String region_name; // 行政區劃名稱
	private int parent_id; // 父行政區劃
	private int region_level; // 層級
	private int region_order; // 排序，用來調整順序
	private String region_name_en; // 行政區劃英文名稱
	private String region_shortname_en; // 行政區劃簡稱

	public int getRegion_id() {
		return region_id;
	}

	public void setRegion_id(int region_id) {
		this.region_id = region_id;
	}

	public String getRegion_code() {
		return region_code;
	}

	public void setRegion_code(String region_code) {
		this.region_code = region_code;
	}

	public String getRegion_name() {
		return region_name;
	}

	public void setRegion_name(String region_name) {
		this.region_name = region_name;
	}

	public int getParent_id() {
		return parent_id;
	}

	public void setParent_id(int parent_id) {
		this.parent_id = parent_id;
	}

	public int getRegion_level() {
		return region_level;
	}

	public void setRegion_level(int region_level) {
		this.region_level = region_level;
	}

	public int getRegion_order() {
		return region_order;
	}

	public void setRegion_order(int region_order) {
		this.region_order = region_order;
	}

	public String getRegion_name_en() {
		return region_name_en;
	}

	public void setRegion_name_en(String region_name_en) {
		this.region_name_en = region_name_en;
	}

	public String getRegion_shortname_en() {
		return region_shortname_en;
	}

	public void setRegion_shortname_en(String region_shortname_en) {
		this.region_shortname_en = region_shortname_en;
	}

}

ProvinceDao.java

package com.yyb.dao;

import java.util.List;

import com.yyb.po.Region;

public interface ProvinceDao {
	public List<Region> findAllProvince();
	public List<Region> findByProvinceId(int provinceId);
}

ProvinceDaoImpl.java

package com.yyb.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.yyb.dao.ProvinceDao;
import com.yyb.po.Region;
import com.yyb.utils.DBUtil;

public class ProvinceDaoImpl implements ProvinceDao {

	@Override
	public List<Region> findAllProvince() {
		List<Region> regions = new ArrayList<Region>();
		String sql = "select * from region where parent_id=1";
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		try {
			conn = DBUtil.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while (rs.next()) {
				Region r = new Region();
				r.setRegion_id(rs.getInt("region_id"));
				r.setRegion_code(rs.getString("region_code"));
				r.setRegion_name(rs.getString("region_name"));
				r.setParent_id(rs.getInt("parent_id"));
				r.setRegion_level(rs.getInt("region_level"));
				r.setRegion_order(rs.getInt("region_order"));
				r.setRegion_name_en(rs.getString("region_name_en"));
				r.setRegion_shortname_en(rs.getString("region_shortname_en"));
				regions.add(r);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBUtil.close(rs, pstmt, conn);
		}
		return regions;
	}

	@Override
	public List<Region> findByProvinceId(int provinceId) {
		List<Region> regions = new ArrayList<Region>();
		String sql = "select * from region where parent_id="+provinceId;
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		try {
			conn = DBUtil.getConnection();
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			while (rs.next()) {
				Region r = new Region();
				r.setRegion_id(rs.getInt("region_id"));
				r.setRegion_code(rs.getString("region_code"));
				r.setRegion_name(rs.getString("region_name"));
				r.setParent_id(rs.getInt("parent_id"));
				r.setRegion_level(rs.getInt("region_level"));
				r.setRegion_order(rs.getInt("region_order"));
				r.setRegion_name_en(rs.getString("region_name_en"));
				r.setRegion_shortname_en(rs.getString("region_shortname_en"));
				regions.add(r);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBUtil.close(rs, pstmt, conn);
		}
		return regions;
	}

}

GetCity.java

package com.yyb.servlet;

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

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

import com.yyb.dao.ProvinceDao;
import com.yyb.dao.impl.ProvinceDaoImpl;
import com.yyb.po.Region;

import net.sf.json.JSONObject;

public class GetCity extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		String provinceId = request.getParameter("provinceId");
		ProvinceDao dao = new ProvinceDaoImpl();
		int id = 0;
		if (provinceId != null && !"".equals(provinceId)) {
			id = Integer.parseInt(provinceId);
		}
		List<Region> regions = dao.findByProvinceId(id);
		JSONObject jobj = new JSONObject();
		if (regions != null && regions.size() > 0) {
			jobj.element("resultCode", 0);
			jobj.element("rs", regions);
		} else {
			jobj.element("resultCode", 1);
		}
		PrintWriter out = response.getWriter();
		out.write(jobj.toString());
		out.flush();
		out.close();
	}

}

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

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

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

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

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

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

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

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-簡單的省市縣三級聯動

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

省市縣三級聯動多種實現方式

採用HTML+css+jQuery 後臺使用Javaweb+JDBC+DBUtils+MySQL 省市縣資料為資料庫獲取的資料後期也會增加準確度更高的行政區劃分資料，供網友參考使用。歡迎關注部落格：https://blog.c

PHP+Ajax+Mysql省市縣三級聯動

PHP+Ajax+Mysql省市縣三級聯動前言之前寫了個小demo，用PHP+Ajax實現一個簡單的二級城市聯動，傳送門。之前用它來練手一下使用Ajax和PHP進行互動，所以資料就簡單的以陣列的形式存放在PHP檔案中，但實際投入生產使用的專案

android與HTML5相結合實現的省市縣三級聯動

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w

省市縣三級聯動 javascript 原生實現例項

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三級省市區</title> </head> <body> &l

省市縣三級聯動(資料庫)

很多專案中，註冊使用者和註冊企業時需要用到省市縣三級聯動的情況，自己整理了一下。前端主要是jquery easyui做的。頁面效果: 目錄結構: 專案原始碼地址: 此專案為maven版本。登陸時的使用者名稱:limingxin

基於Json.net的省市縣三級聯動WinForm製作

這是最近接到的一個小任務的前期準備工作，後面最終實現是在ArcGis的Arctoolbox中，即自定義一個GP工具（這個之後再寫）。簡單的來說就是要實現三個下拉框（在C#.net中就是combobox），第一個下拉框選擇省級單位，第二框根據第一個框的結果更新出市級單位，第三

easyui combobox下拉框省市縣三級聯動(從資料庫獲取資料)

//combobox的onLoadSuccess,onChange,onSelect事件省:<input id="province" style="width: 110px;" /> 市:<input id="city" style="width

用jquery寫的json省市縣三級聯動下拉

<form action="#" name="myform"> <label>省</label><select name="provice" id="provice"><option value="-1">請輸入

購物車和用戶交互，顯示省市縣三級聯動的選擇

car strip 技術元素用戶交互分享 set 功能 true 購物車購物車功能要求：要求用戶輸入總資產，例如：2000 顯示商品列表，讓用戶根據序號選擇商品，加入購物車購買，如果商品總額大於總資產，提示賬戶余額不足，否則，購買成功。附加：可充值、某

PC（原生）——省市縣三級聯動

1、樣式展示： 2、html： <div class="message_li_type"> <span class="message_li_type_span">地址</span>

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

相關推薦