JAVA AJAX JS五级联动

实现朝代、皇帝、纪年、政区类型、政区沿革五级联动

HTML页面

<div class="spantype center-block ">
	<p style="line-height: 2;">朝代：</p>
	<p>
		<select id="NJL1" class="form-control input-sm" onchange="selectChange1()">
		  <option value="0">请选择朝代</option>
				<option value="秦朝">秦朝</option>
				<option value="西汉">西汉</option>
				<option value="新">新</option>
				<option value="东汉">东汉</option>
				<option value="魏">魏</option>
				<option value="蜀">蜀</option>
				<option value="吴">吴</option>
				<option value="西晋">西晋</option>
				<option value="东晋">东晋</option>
				<option value="南朝（宋）">南朝（宋）</option>
				<option value="南朝（齐）">南朝（齐）</option>
				<option value="南朝（梁）">南朝（梁）</option>
				<option value="南朝（陈）">南朝（陈）</option>
				<option value="北朝（北魏）">北朝（北魏）</option>
				<option value="北朝（东魏）">北朝（东魏）</option>
				<option value="北朝（西魏）">北朝（西魏）</option>
				<option value="北朝（北周）">北朝（北周）</option>
				<option value="北朝（北齐）">北朝（北齐）</option>
				<option value="隋">隋</option>
				<option value="唐">唐</option>
				<option value="周">周</option>
				<option value="后梁">后梁</option>
				<option value="后唐">后唐</option>
				<option value="后晋">后晋</option>
				<option value="后汉">后汉</option>
				<option value="后周">后周</option>
				<option value="北宋">北宋</option>
				<option value="南宋">南宋</option>
				<option value="辽">辽</option>
				<option value="金">金</option>
				<option value="元">元</option>
				<option value="西夏">西夏</option>
				<option value="明">明</option>
				<option value="清">清</option>
				<option value="中华民国">中华民国</option>
				<option value="中华人民共和国">中华人民共和国</option>
		</select>
	</p>
	<p>——</p>
	<p>
		<select id="NJL2" class="form-control input-sm" onchange="selectChange2()">
							<option value="0">请选择</option>
		</select>
	</p>
</div>
<div class="spantype center-block ">
	<p style="line-height: 2;">公元纪年：</p>
	<p style="width: 74%">
		<select id="NJL3" class="form-control input-sm" onchange="selectChange3()" style="width: 100%">
							<option value="0">请选择纪年</option>
		</select>
	</p>
</div>
	<div class="spantype center-block ">
			<p style="line-height: 2;">政区类型：</p>
			<p style="width: 74%">
				<select id="NJL4" class="form-control input-sm" onchange="selectChange4()" style="width: 100%">
									<option value="0">请选择政区类型</option>
				</select>
			</p>
		</div>
		<div class="spantype center-block ">
			<p style="line-height: 2;">沿革类型：</p>
			<p style="width: 74%">
				<select id="NJL5" class="form-control input-sm"  style="width: 100%">
						<option value="0">请选择沿革类型</option>
				</select>
			</p>
		</div>

JS页面

	function selectChange1() {
	var njl1_value = document.getElementById("NJL1").value;
	temp1 = {"njl1" : njl1_value};
	console.log(njl1_value);
	
	$.ajax({
		type : "post",
		url : "getMenuLevel1.action",
		async : false,
		data : {"njl1" : njl1_value},
		scriptCharset : 'UTF-8',
		dataType : 'json',
		success : function(msg) {
			console.log(msg);
			var menuData = msg.data;
			var selectoption = menuData[i];
			document.getElementById("NJL2").innerHTML = "<option value=\"0\">请选择</option>";
			document.getElementById("NJL3").innerHTML = "<option value=\"0\">请选择纪年</option>";
			document.getElementById("NJL4").innerHTML = "<option value=\"0\">请选择政区类型</option>";
			document.getElementById("NJL5").innerHTML = "<option value=\"0\">请选择沿革类型</option>";
			for(var i=0; i < menuData.length; i++) {
				console.log(menuData[i]);
				var newOption = document.createElement("option");
				newOption.value = menuData[i];
				newOption.innerHTML = menuData[i];
				document.getElementById("NJL2").appendChild(newOption);
			
			}
		}
	});
}

function selectChange2() {
	var njl2_value = document.getElementById("NJL2").value;
	temp1 = {"njl2" : njl2_value};
	console.log(njl2_value);
	$.ajax({
		type : "post",
		url : "getMenuLevel2.action",
		async : false,
		data : {"njl2" : njl2_value},
		scriptCharset : 'UTF-8',
		dataType : 'json',
		success : function(msg) {
			console.log(msg);
			var menuData = msg.data;
			var selectoption = menuData[i];
			document.getElementById("NJL3").innerHTML = "<option value=\"0\">请选择纪年</option>";
			document.getElementById("NJL4").innerHTML = "<option value=\"0\">请选择政区类型</option>";
			document.getElementById("NJL5").innerHTML = "<option value=\"0\">请选择沿革类型</option>";
			for(var i=0; i < menuData.length; i++) {
				console.log(menuData[i]);
				document.getElementById("NJL3").innerHTML = "<option value=\"0\">请选择纪年</option>";
				var newOption = document.createElement("option");
				newOption.value = menuData[i];
				newOption.innerHTML = menuData[i];
				document.getElementById("NJL3").appendChild(newOption);
			}
		}
	});	
}

function selectChange3() {
	var njl3_value = document.getElementById("NJL3").value;
	temp1 = {"njl3" : njl3_value};
	console.log(njl3_value);
	$.ajax({
		type : "post",
		url : "getMenuLevel3.action",
		async : false,
		data : {"njl3" : njl3_value},
		scriptCharset : 'UTF-8',
		dataType : 'json',
		success : function(msg) {
			console.log(msg);
			var menuData = msg.data;
			var selectoption = menuData[i];
			document.getElementById("NJL4").innerHTML = "<option value=\"0\">请选择政区类型</option>";
			document.getElementById("NJL5").innerHTML = "<option value=\"0\">请选择沿革类型</option>";
			for(var i=0; i < menuData.length; i++) {
				console.log(menuData[i]);
				var newOption = document.createElement("option");
				newOption.value = menuData[i];
				newOption.innerHTML = menuData[i];
				document.getElementById("NJL4").appendChild(newOption);
			}
		}
	});	
}

function selectChange4() {
	var njl4_value = document.getElementById("NJL4").value;
	temp1 = {"njl4" : njl4_value};
	console.log(njl4_value);
	$.ajax({
		type : "post",
		url : "getMenuLevel4.action",
		async : false,
		data : {"njl4" : njl4_value},
		scriptCharset : 'UTF-8',
		dataType : 'json',
		success : function(msg) {
			console.log(msg);
			var menuData = msg.data;
			var selectoption = menuData[i];
			document.getElementById("NJL5").innerHTML = "<option value=\"0\">请选择沿革类型</option>";
			for(var i=0; i < menuData.length; i++) {
				console.log(menuData[i]);
				var newOption = document.createElement("option");
				newOption.value = menuData[i];
				newOption.innerHTML = menuData[i];
				document.getElementById("NJL5").appendChild(newOption);
			}
		}
	});	
}

JAVA页面

public class SeniorSearch  extends ActionSupport implements ServletRequestAware, ServletResponseAware{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private String njl1;
	private String njl2;
	private String njl3;
	private String njl4;
	
	public String getNjl4() {
		return njl4;
	}
	public void setNjl4(String njl4) {
		this.njl4 = njl4;
	}
	public String getNjl3() {
		return njl3;
	}
	public void setNjl3(String njl3) {
		this.njl3 = njl3;
	}
	public String getNjl2() {
		return njl2;
	}
	public void setNjl2(String njl2) {
		this.njl2 = njl2;
	}
	public String getNjl1() {
		return njl1;
	}
	public void setNjl1(String njl1) {
		this.njl1 = njl1;
	}
	public void getMenuLevel1() throws Exception {
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
		PrintWriter out = ServletActionContext.getResponse().getWriter();
		DBService ds = new DBService();
		JSONObject json = new JSONObject();
		JSONArray ja = new JSONArray();
		Connection conn = ds.setConnection();
		String str1 = "select * from cdnh where DTCD = '"+njl1+"';";
		System.out.println(str1);
		PreparedStatement pstmt = conn.prepareStatement(str1);
		ResultSet res = pstmt.executeQuery();
		while (res.next()) {
			ja.put(res.getString(2));
		}
		System.out.println(ja.toString());
		json.put("data", ja);
		pstmt.close();
		conn.close();
		out.write(json.toString());
		out.close();
	}
	public void getMenuLevel2() throws Exception {
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
		PrintWriter out = ServletActionContext.getResponse().getWriter();
		DBService ds = new DBService();
		JSONObject json = new JSONObject();
		JSONArray ja = new JSONArray();
		Connection conn = ds.setConnection();
		String str2 = "select * from level2_hd_gy where NH = '"+njl2+"';";
		System.out.println(str2);
		PreparedStatement pstmt = conn.prepareStatement(str2);
		ResultSet res = pstmt.executeQuery();
		while (res.next()) {
			ja.put(res.getString(2));
		}
		System.out.println(ja.toString());
		json.put("data", ja);
		pstmt.close();
		conn.close();
		out.write(json.toString());
		out.close();
	}
	
	public void getMenuLevel3() throws Exception {
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
		PrintWriter out = ServletActionContext.getResponse().getWriter();
		DBService ds = new DBService();
		JSONObject json = new JSONObject();
		JSONArray ja = new JSONArray();
		Connection conn = ds.setConnection();
		String str3 = "select * from level3_gy_zq where GYJN = '"+njl3+"';";
		System.out.println(str3);
		PreparedStatement pstmt = conn.prepareStatement(str3);
		ResultSet res = pstmt.executeQuery();
		while (res.next()) {
			ja.put(res.getString(2));
		}
		System.out.println(ja.toString());
		json.put("data", ja);
		pstmt.close();
		conn.close();
		out.write(json.toString());
		out.close();
	}
	
	public void getMenuLevel4() throws Exception {
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");
		PrintWriter out = ServletActionContext.getResponse().getWriter();
		DBService ds = new DBService();
		JSONObject json = new JSONObject();
		JSONArray ja = new JSONArray();
		Connection conn = ds.setConnection();
		String str4 = "select * from level4_zq_yg where ZQLX = '"+njl4+"';";
		System.out.println(str4);
		PreparedStatement pstmt = conn.prepareStatement(str4);
		ResultSet res = pstmt.executeQuery();
		while (res.next()) {
			ja.put(res.getString(2));
		}
		System.out.println(ja.toString());
		json.put("data", ja);
		pstmt.close();
		conn.close();
		out.write(json.toString());
		out.close();
	}
	@Override
	public void setServletResponse(HttpServletResponse arg0) {
		// TODO Auto-generated method stub
		
	}
	@Override
	public void setServletRequest(HttpServletRequest arg0) {
		// TODO Auto-generated method stub
		
	}
}

struts配置

	<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.multipart.maxSize" value="100000000" />
<package name="default" namespace="/" extends="struts-default">
		<action name="getMenuLevel1" class="com.beidou.zqcx.SeniorSearch" 	method="getMenuLevel1">
			<result>/index.html</result> 
		 </action>
		 
		 <action name="getMenuLevel2" class="com.beidou.zqcx.SeniorSearch" 	method="getMenuLevel2">
			<result>/index.html</result> 
		 </action>
		 
		  <action name="getMenuLevel3" class="com.beidou.zqcx.SeniorSearch" 	method="getMenuLevel3">
			<result>/index.html</result> 
		 </action>
		 
		 <action name="getMenuLevel4" class="com.beidou.zqcx.SeniorSearch" 	method="getMenuLevel4">
			<result>/index.html</result> 
		 </action>
	</package>
</struts>