省份-市級-區級 級聯 Ajax JSON

省份-市級-區級 級聯  Ajax JSON

技術爲JQuery+Ajax+JSON， 當用戶選定省份後，級聯出市，選出市後，級聯出區。原理爲：JQuery檢測出下拉列表變化時，通過Ajax調用後臺數據庫，後臺傳回JSON，動態添加<option></option>並且賦值到下一級中。注意編碼問題爲了方便統一UTF-8。

js關鍵代碼：

function convertURL(url) { //時間戳
	var timstamp = (new Date()).valueOf();
	if (url.indexOf("?") >= 0) {
		url = url + "&t=" + timstamp;
	} else {
		url = url + "?t=" + timstamp;
	}
	return url;
}

$().ready(function() {// JQUERY市級聯
			$("#Province").change(
					function() {
						$("#City").html(
								'<option selected="selected">--全部--</option>');
						var id = document.getElementById("Province").value;

						$.getJSON(
								convertURL("addprochange.action?proid=" + id),
								function(data) {
									$.each(data.city, function(id, name) {
										$("#City").append(
												'<option value='
														+ data.city[id].id
														+ '>'
														+ data.city[id].name
														+ '</option>');
									});

								});
					});

		});

$().ready(function() {// JQUERY區級聯
		$("#City").change(function() {$("#Direct").html('<option selected="selected">--全部--</option>');
		var id = document.getElementById("City").value;
		$("#Show tr:gt(2)").empty();
		$.getJSON(convertURL("addcitchange.action?proid="+ id),
		function(data) {$.each(
						data.direct,
						function(id,name) {
							$("#Show").append('<tr><td><input id=old name=old type=checkbox value='
									+ data.direct[id].id+ '></td>'+ '<td>'
									+ $("#Province").find("option:selected").text()
									+ '</td>'+ '<td>'
									+ $("#City").find("option:selected").text()
									+ '</td>'+ '<td>'+ data.direct[id].name
									+ '</td></tr>');
							});
					});
			});
});

Java核心代碼，這裏採用了JSONjar包，自動封裝成JSON數據

	public void adpchange() throws MyException {// 省份改變，返回List<City>
		try {
			if (proid != null)
				listcity = actrl.findCity(Integer.parseInt(proid));
			else
				listcity = actrl.findAllCity();
			ActionContext con = ActionContext.getContext();
			HttpServletResponse resp = (HttpServletResponse) con
					.get(ServletActionContext.HTTP_RESPONSE);
			resp.setCharacterEncoding("UTF-8");//注意編碼
			JSONObject jsonObject = new JSONObject();//JSON封裝
			jsonObject.put("city", listcity);
			resp.getWriter().write(jsonObject.toString());
			jsonObject.clear();
		} catch (Exception e) {
			log.error("地址返回錯誤");
			throw new MyException("地址返回錯誤");
		}
	}

返回List<Direct> 類似

	public void adcchange() throws MyException {// 城市改變，返回List<Direct>
		try {
			if (proid != null)
				listdirect = actrl.findDirect(Integer.parseInt(proid));
			else
				listdirect = actrl.findAllDirect();
			ActionContext con = ActionContext.getContext();
			HttpServletResponse resp = (HttpServletResponse) con
					.get(ServletActionContext.HTTP_RESPONSE);
			resp.setCharacterEncoding("UTF-8");
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("direct", listdirect);
			resp.getWriter().write(jsonObject.toString());
			jsonObject.clear();
		} catch (Exception e) {
			log.error("地址返回錯誤");
			throw new MyException("地址返回錯誤");
		}
	}

度娘上基本都是講地址寫死到JS中，個人感覺這樣維護起來比較麻煩。而且有些冷門地址幾乎不需要，不如寫到數據庫中靈活一些。

大工搞成，show一下：

1.

2.

3.