Ajax三級聯動下拉選擇省市區

原創 conglinyu 2020-06-21 14:05

下拉列表省市區的聯動選擇：

先看效果：




本次所用數據庫sql文件以及java源碼可從本人網盤下載：

http://pan.baidu.com/s/1jIdV7r4


提示：使用可視化工具導入ChinaStates數據表，這張表導入時可能需要較長的時間。

ChinaStates表中包含省名稱信息、所對應的市名稱信息、以及區縣信息



數據層代碼：

public class ChinaDao {

	public ResultSet chinaList(Connection con)throws Exception{
		String sql="SELECT AreaCode,AreaName,ParentAreaCode FROM ChinaStates WHERE ParentAreaCode=0001";
		PreparedStatement pstmt=con.prepareStatement(sql);
		ResultSet rs=pstmt.executeQuery();
		return rs;
	}
	public ResultSet cityList(Connection con,String provinceValue)throws Exception{
		String sql="SELECT AreaCode,AreaName,ParentAreaCode FROM ChinaStates WHERE ParentAreaCode=?";
		PreparedStatement pstmt=con.prepareStatement(sql);
		pstmt.setString(1, provinceValue);
		System.out.println(provinceValue);
		ResultSet rs=pstmt.executeQuery();
		return rs;
	}
	
}

數據庫取出數據轉化爲Json數據，再打到前臺。

使用一個JsonUtil工具類和ResponseUtil工具類


後端Servlet代碼

package com.zhiqi.web;

import java.io.IOException;
import java.sql.Connection;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhiqi.dao.ChinaDao;
import com.zhiqi.util.DbUtil;
import com.zhiqi.util.JsonUtil;
import com.zhiqi.util.ResponseUtil;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class LinkageSelectServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	DbUtil dbUtil=new DbUtil();
	ChinaDao chinaDao=new ChinaDao();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		String action=req.getParameter("action");
		if("provinceSelect".equals(action)){
			provinceSelect(req,resp);
		}else if("citySelect".equals(action)){
			citySelect(req,resp);
		}else if("countySelect".equals(action)){
			countySelect(req,resp);
		}
	}
	private void provinceSelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{
		
		Connection con=null;
		try{
			con=dbUtil.getCon();
			JSONObject result=new JSONObject();
			JSONArray jsonArray=JsonUtil.formatRsToJsonArray(chinaDao.chinaList(con));
			result.put("provinceRows", jsonArray);
			ResponseUtil.write(resp, result);
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			try {
				dbUtil.closeCon(con);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	private void citySelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{
		String provinceValue=req.getParameter("provinceValue");
		
		Connection con=null;
		try{
			con=dbUtil.getCon();
			JSONObject result=new JSONObject();
			JSONArray jsonArray=JsonUtil.formatRsToJsonArray(chinaDao.cityList(con,provinceValue));
			result.put("cityRows", jsonArray);
			ResponseUtil.write(resp, result);
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			try {
				dbUtil.closeCon(con);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	private void countySelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{
		String cityValue=req.getParameter("cityValue");
		
		Connection con=null;
		try{
			con=dbUtil.getCon();
			JSONObject result=new JSONObject();
			JSONArray jsonArray=JsonUtil.formatRsToJsonArray(chinaDao.cityList(con,cityValue));
			result.put("countyRows", jsonArray);
			ResponseUtil.write(resp, result);
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			try {
				dbUtil.closeCon(con);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
}


前臺顯示層的jsp代碼：

用js操作DOM來進行動態的顯示

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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">
<script type="text/javascript">
function provinceInit(){
	var xmlHttp=new XMLHttpRequest();
	var province=document.getElementById("province");
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			var dataObj=eval("("+xmlHttp.responseText+")");
			var a=dataObj.provinceRows;
			for(var i=0;i<a.length;i++){
				province.innerHTML+="<option value='"+a[i].AreaCode+"'>"
				+a[i].AreaName
				"</option>";
			}
			/*
			for(var i=0;i<a.length;i++){
				var obj=a[i];
				province.options.add(new Option(obj.areaName));
			}
			*/
		}
	};
	xmlHttp.open("get", "testJson?action=provinceSelect", true);
	xmlHttp.send();
}

function provinceSelect() {
	var xmlHttp=new XMLHttpRequest();
	var provinceValue=document.getElementById("province").value;
	var city=document.getElementById("city");
	city.options.length=0;//刪除所有下拉框的選項，即重置
	city.innerHTML="";
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			var dataObj=eval("("+xmlHttp.responseText+")");
			var a=dataObj.cityRows;
			for(var i=0;i<a.length;i++){
				var obj=a[i];
				city.options.add(new Option(obj.AreaName,obj.AreaCode));
			}
		}
	};
	xmlHttp.open("get", "testJson?action=citySelect&provinceValue="+provinceValue, true);
	xmlHttp.send();
}
function citySelect() {
	var xmlHttp=new XMLHttpRequest();
	var cityValue=document.getElementById("city").value;
	var county=document.getElementById("county");
	county.options.length=0;//刪除所有下拉框的選項，即重置
	county.innerHTML="";
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			var dataObj=eval("("+xmlHttp.responseText+")");
			var a=dataObj.countyRows;
			for(var i=0;i<a.length;i++){
				var obj=a[i];
				county.options.add(new Option(obj.AreaName,obj.AreaCode));
			}
		}
	};
	xmlHttp.open("get", "testJson?action=countySelect&cityValue="+cityValue, true);
	xmlHttp.send();
}
</script>
<title>二級聯動</title>
</head>
<body>

請選擇地區：
<select id="province" οnchange="provinceSelect()">
	<option value="-1">請選擇</option>
</select>
<select id="city" οnchange="citySelect()">
	<option value="-1">請選擇</option>
</select>
<select id="county">
	<option value="-1">請選擇</option>
</select>

</body>
<script type="text/javascript">
provinceInit();
</script>
</html>


阿賈克斯Ajax

的一般形式：

function provinceInit(){
	var xmlHttp=new XMLHttpRequest();
	var province=document.getElementById("province");
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			var dataObj=eval("("+xmlHttp.responseText+")");

		}
	};
	xmlHttp.open("get", "testJson?action=provinceSelect", true);
	xmlHttp.send();
}

主要是XMLHttpRequest對象

open是請求參數有 方式，url，是否異步

send爲發送，此處不設參數

考慮瀏覽器的兼容性，兼容IE

可以加入

var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }else{//IE 5,6的支持
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

eval("("+xmlHttp.responseText+")");此處eval()函數可以使後臺傳來的json數據轉化爲dataObject


重點掌握Ajax異步刷新

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章