原理說明

1. 準備工作

1.創建表 [城市信息表]  [行政區信息表]
create table city(
    cid int, 
    cname varchar(200),
    pid int
);

create table qu(
    qid int,
    qname varchar(200),
    cid int
);

2.製造測試數據
insert into city values(1,'北京市',1);
insert into city values(2,'廊坊市',1);
insert into city values(3,'瀋陽市',2);
insert into city values(4,'大連市',2);

insert into qu values(1,'海淀區',1);
insert into qu values(2,'廊坊區',2);
insert into qu values(3,'皇姑區',3);
insert into qu values(4,'甘井子區',4);

2. 省市級聯

1. index.jsp  添加findCity,用於將用戶選擇【省編號】通過代理對象發送到服務器端,
        並接受結果，填充城市下拉列表
     2. CityFindServlet:
                     1. 獲得【省編號】
                     2. JDBC獲得當前省擁有的所有的城市信息
                     3. 將【城市信息】交給【代理對象】

3.如何將JAVA中高級類型數據交給代理對象進行編譯

1.所有的編程語言，都擁有8中基本數據類型：
     編程語言都需要在內存中運行，運行期間涉及的數據特徵就必須符合內存條的要求。
     所有內存廠商，都只支持8中基本數據類型 
2.不同編程語言的基本數據類型，彼此之間是可以直接相互編譯 
3.由於不同編程語言描述各自高級類型時，使用描述方式是不同的，因此 不同編程語言之間高級類型是無法直接編譯 
4.javascript如何描述一個對象：
    JSON形式 var cityObj ={cid:"1",cname:"北京",pid:"1"} 
5. java如何描述一個對象 
    City city = new City(); 
    city.cid =1; 
    city.cname="北京" 
6. 爲了能夠讓【代理對象】正確編譯高級類型 在服務器端，將JAVA修飾對象格式轉變爲JSON形式格式

4.0 如何實現真正三表級聯

1.上述的兩個功能中，都是讀取當前下拉表中選中<option>來獲得隸屬於當前數據的內容 
  2.瀏覽器加載下拉列表時，默認情況將下拉列表中第一個<option>作爲默認選中項。
            瀏覽器將當前<option value>自動賦值給當前的下拉列表

環境：

jar包：

mysql-connector-java-5.1.25.jar
json-lib-2.3-jdk15.jar
commons-collections-3.2.2.jar
commons-beanutils-1.3.jar
commons-lang-1.0.1.jar
ezmorph-1.0.2.jar
commons-logging-1.2.jar

下載地址：https://mvnrepository.com

搭建環境

eclipse
jdk1.8
tomacat8.5
Dynamic Web Module 3.1

代碼(Java web)：

附github地址：

1.index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
	var xmlhttp = null;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	    xmlhttp = new XMLHttpRequest();
	} else { // code for IE6, IE5
	    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	function findCity() {
		var pid = document.getElementById("province").value;
		if (pid == 0) {
			alert("請選擇具體的省");
			return;
		}
                //以下是post方式
                xmlhttp.open("post", "CityFindServlet", true); // 1.初始化【代理對象】 
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //使用post方式必須有這句話
		xmlhttp.send("pid=" + pid); // 2.通知【代理對象】發送請求 ,使用post方式
                //以下是get方式
                //xmlhttp.open("get", "CityFindServlet?pid="+pid, true);
		//xmlhttp.send();
		xmlhttp.onreadystatechange = function() { // 3.實時監控【代理對象】工作狀態，決定何時讀取服務器端返回的數據 
			if (xmlhttp.readyState == 4) {
				// 4...........................................獲得服務器端的數據 
				var jsonData = xmlhttp.responseText; //json形式的字符串 "[{},{}]" 
				// alert("jsonData "+jsonData); 
				// 將JSON形式字符串，轉換成一個真正的JSON形式對象 
				var jsonObj = eval("{" + jsonData + "}");//[cid:xx,cname:xx;cid:xx,cname:xx] 
				// alert("jsonObj "+jsonObj); 
				//將返回的數據，填充到城市下拉列表--------------start
				document.getElementById("city").options.length = 0; //1.將當前城市下拉列表原有的<option>銷燬掉 
				for (var i = 0; i < jsonObj.length; i++) { //2.將新的數據，生成<option>,並填充到下拉列表 
					var optionObj = new Option(jsonObj[i].cname, jsonObj[i].cid);
					document.getElementById("city").options.add(optionObj);
				}
				//將返回的數據，填充到城市下拉列表--------------end 
				//此時城市下拉列表中，已經有了value，就將這個value發送到服務器端，獲得當前城市擁有的行政區 
				findQu();
			}
		}
	} //根據城市編號，查詢對應行政區 
	function findQu() {
		var cid = document.getElementById("city").value;
		if (cid == 0) {
			alert("請選擇具體的城市");
			return;
		}
                //以下是post方式
		xmlhttp.open("post", "QuFindServlet", true); // 1.初始化【代理對象】 
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //使用post方式必須有這句話
		xmlhttp.send("cid=" + cid); // 2.通知【代理對象】發送請求 ,使用post方式
                //以下是get方式
                //xmlhttp.open("get", "QuFindServlet?cid="+cid, true);
		//xmlhttp.send();
		xmlhttp.onreadystatechange = function() { // 3.實時監控【代理對象】工作狀態，決定何時讀取服務器端返回的數據 
			if (xmlhttp.readyState == 4) {
				// 4...........................................獲得服務器端的數據 
				var jsonData = xmlhttp.responseText; //json形式的字符串 "[{},{}]" 
				//alert("jsonData "+jsonData); // 將JSON形式字符串，轉換成一個真正的JSON形式對象 
				// eval() 
				var jsonObj = eval("{" + jsonData + "}");//[qid:xx,1name:xx;qid:xx,qname:xx] 
				// alert("jsonObj "+jsonObj); 
				//將返回的數據，填充到城市下拉列表--------------start 
				document.getElementById("qu").options.length = 0;	//1.將當前城市下拉列表原有的<option>銷燬掉 
				for (var i = 0; i < jsonObj.length; i++) { //2.將新的數據，生成<option>,並填充到下拉列表 
					var optionObj = new Option(jsonObj[i].qname, jsonObj[i].qid);
					document.getElementById("qu").options.add(optionObj);
				}
				//將返回的數據，填充到城市下拉列表--------------end 
			}
		}
	}
</script>
<body>
	省
	<select id="province" onchange="findCity()">
		<option value="0">請選擇</option>
		<option value="1">河北省</option>
		<option value="2">遼寧省</option>
	</select>
	<br>城市
	<select id="city" onchange="findQu()">
		<option value="0">請選擇</option>
	</select> 
	<br>行政區
	<select id="qu">
		<option value="0">請選擇</option>
	</select>
</body>
</html>

2.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true">
  <display-name>demo</display-name>
  <servlet>
    <servlet-name>CityFindServlet</servlet-name>
    <servlet-class>src.com.aircode.action.CityFindServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>QuFindServlet</servlet-name>
    <servlet-class>src.com.aircode.action.QuFindServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CityFindServlet</servlet-name>
    <url-pattern>/CityFindServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>QuFindServlet</servlet-name>
    <url-pattern>/QuFindServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

3.City

package src.com.aircode.entity;

public class City {
	private int cid;
	private String cname;
	private int pid;
	
	public City() {
		super();
	}
	public City(int cid, String cname, int pid) {
		super();
		this.cid = cid;
		this.cname = cname;
		this.pid = pid;
	}
	public int getCid() {
		return cid;
	}
	public void setCid(int cid) {
		this.cid = cid;
	}
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	
	
}

4.Qu

package src.com.aircode.entity;

public class Qu {
	private int qid;
	private String qname;
	private int cid;
	
	public Qu() {
		super();
	}
	public Qu(int qid, String qname, int cid) {
		super();
		this.qid = qid;
		this.qname = qname;
		this.cid = cid;
	}
	public int getCid() {
		return cid;
	}
	public void setCid(int cid) {
		this.cid = cid;
	}
	public String getQname() {
		return qname;
	}
	public void setQname(String qname) {
		this.qname = qname;
	}
	public int getQid() {
		return qid;
	}
	public void setQid(int qid) {
		this.qid = qid;
	}
}

5.CityFindServlet

package src.com.aircode.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
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 net.sf.json.JSONArray;
import src.com.aircode.entity.City;

/**
 * Servlet implementation class CityFindServlet
 */
@WebServlet("/CityFindServlet")
public class CityFindServlet extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	/**
     * @see HttpServlet#HttpServlet()
     */
	public CityFindServlet() {
		super();
	}
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String pid = request.getParameter("pid");
		
		String sql = "select * from city where pid=?";
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<City> cityList = new ArrayList<City>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			con = DriverManager.getConnection("jdbc:mysql://localhost:3306/aa", "root", "124365");
			ps = con.prepareStatement(sql);
			ps.setInt(1, Integer.valueOf(pid));
			rs = ps.executeQuery();
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		try {
			while (rs.next()) {
				City city = new City();
				city.setCid(rs.getInt("cid"));
				city.setCname(rs.getString("cname"));
				city.setPid(rs.getInt("pid"));
				cityList.add(city);
			}
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		JSONArray jsonData = JSONArray.fromObject(cityList);
		System.out.println(jsonData);
		response.setCharacterEncoding("utf-8");
		response.getWriter().print(jsonData);
	}
	
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

6.QuFindServlet

package src.com.aircode.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
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 net.sf.json.JSONArray;
import src.com.aircode.entity.City;
import src.com.aircode.entity.Qu;

/**
 * Servlet implementation class QuFindServlet
 */
@WebServlet("/QuFindServlet")
public class QuFindServlet extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	/**
     * @see HttpServlet#HttpServlet()
     */
	public QuFindServlet() {
		super();
	}
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String pid = request.getParameter("cid");
		
		String sql = "select * from qu where cid=?";
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<Qu> quList = new ArrayList<Qu>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			con = DriverManager.getConnection("jdbc:mysql://localhost:3306/aa", "root", "124365");
			ps = con.prepareStatement(sql);
			ps.setInt(1, Integer.valueOf(pid));
			rs = ps.executeQuery();
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		try {
			while (rs.next()) {
				Qu qu = new Qu();
				qu.setQid(rs.getInt("qid"));
				qu.setQname(rs.getString("qname"));
				qu.setCid(rs.getInt("cid"));
				quList.add(qu);
			}
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		JSONArray jsonData = JSONArray.fromObject(quList);
		System.out.println(jsonData);
		response.setCharacterEncoding("utf-8");
		response.getWriter().print(jsonData);
	}
	
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

作者：挑戰者666888
鏈接：https://www.jianshu.com/p/ddce781935b3
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。

servlet+jsp/js二種實現方式：三級聯動（附加demo代碼）

原理說明

1. 準備工作

2. 省市級聯

3.如何將JAVA中高級類型數據交給代理對象進行編譯

4.0 如何實現真正三表級聯

環境：

jar包：

搭建環境

代碼(Java web)：

1.index.jsp

2.web.xml

3.City

4.Qu

5.CityFindServlet

6.QuFindServlet

redis的key亂碼問題和值自增問題

CORS error 但是 status code 是200 OK

一個開源且全面的C#算法實戰教程

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

壓縮上傳的GPU數據的方案

使用skopeo同步鏡像

對丁小平微分研究報道的總結感受

“無窮小”的爭論:一個小小的數學概念竟然震撼了整個數學界?

python中type的使用

概率論與拉普拉斯決定論矛盾嗎？

中國古代科技競就有多高？-哪些你不知道的問數學的10大偉大發明

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結