JAVA-模块化开发-三级级联（省市县）（异步和json的联合运用）

项目模块

第一步：建立省市区三级数据库

具体大家可以上网上百度查询地区源码
这里给出建表源码

CREATE TABLE `area` (
  `id` varchar(36) NOT NULL COMMENT '地域ID',
  `code` varchar(30) NOT NULL COMMENT '地域编码',
  `name` varchar(30) NOT NULL COMMENT '地域名称',
  `parent_code` varchar(30) DEFAULT NULL COMMENT '父节点编码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='地域';

第二步：连接数据库，网上搜maven的jar包，完成一系列准备工作

第三步：建立好模块，具体为imp，dao，service，servlet（下面详细给出每一个模块文件的具体代码）

imp：定义接口
两个接口：

dao：处理数据sql运用

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.jd.tool.db.DBLink;
import com.jd.tool.db.IRowMapper;

import area.imp.IAreaDao;
import vo.Area;

public class AreaDao implements IAreaDao{
	public ArrayList<Area> select(String parentCode) {
		final ArrayList<Area> LIST = new ArrayList<Area>();
		String sql = "select * from area where parent_code='"+parentCode+"'";
		new DBLink().select(sql, new IRowMapper() {//使用DBLink中的方法来获取所需要的值
			public void rowMapper(ResultSet rs) {
				try {
					while(rs.next()) {
						String id = rs.getString("id");
						String name = rs.getString("name");
						String code = rs.getString("code");
						String parentCode = rs.getString("parent_code");
						LIST.add(new Area(id,name,code,parentCode));
					}
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		});
		return LIST;
	}
}

service：处理数据，分配数据如何处理

import java.util.ArrayList;

import area.dao.AreaDao;
import area.imp.IAreaService;
import vo.Area;

public class AreaService implements IAreaService {

	public ArrayList<Area> select(String parentCode) {
		if(parentCode==null) {
			parentCode="";
		}
		return new AreaDao().select(parentCode);
	}
}

servlet：定义servlet

import java.io.IOException;
import java.io.PrintWriter;

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

import com.google.gson.Gson;

import area.service.AreaService;

public class AreaServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//response.setContentType("application/json; charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		String parentCode = request.getParameter("parentCode");
		String json = new Gson().toJson(new AreaService().select(parentCode));//将LIST数组变为json数据结构
		System.out.println(parentCode);
		PrintWriter out = response.getWriter();
		out.write(json);
		out.flush();
		out.close();
	}
}

建立Area类，定义get，set方法，并且构造方法定义四个成员变量

public class Area {
	private String id;
	private String name;
	private String code;
	private String parentCode;
	public Area(String id, String name, String code, String parentCode) {
		super();
		this.id = id;
		this.name = name;
		this.code = code;
		this.parentCode = parentCode;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getParentCode() {
		return parentCode;
	}
	public void setParentCode(String parentCode) {
		this.parentCode = parentCode;
	}
}

开始进行级联编程

首先在jsp文件当中定义好省级如何实现

建立省级下拉列表：

<select id = "province" onchange="cityChange()">//onchange的作用在后面实现市级体现
		<option value="">--请选择--</option>
	</select>

定义script方法：
通过异步的方式实现局部提交，利用append方法，将options添加到下拉列表当中

<script>
$(function(){
			var obj = {
				url:"./AreaServlet",
				//type:"",
				//data:"",
				//dataType:"json",
				success:function(data){
					data = JSON.parse(data);//有些浏览器的版本不支持json对象，我们手动添加js文件
					var options = "";
					for (var i = 0; i < data.length; i++) {
						var obj = data[i];
						options = options + "<option value='"+obj.code+"'>"+obj.name+"</option>";
					}
					$("#province").append(options);
				},
			}
			$.ajax(obj);
	});
</script>

运行效果：

通过省级地区的改变通过异步的方法来改变市级地区的下拉列表

建立市级下拉列表：

<select id = "city" onchange="countyChange()">//countyChange（）方法会在下一步县级地区实现
		<option value="">--请选择城市--</option>
	</select>

建立script方法：

<script>
	function cityChange(){
		var parentCode = $("#province").val();
		if(parentCode==""){//防止出现为空的情况 ，如果全部为空则所有下拉列表皆为省级
			$("#city").empty();
			$("#city").append("<option value=''>--请选择城市--</option>");
			return;
		}
		$("#county").empty();
		var obj = {
				url:"./AreaServlet?parentCode="+parentCode,
				//type:"",
				//data:"",
				//dataType:"json",
				success:function(data){
					data = JSON.parse(data);
					var options = "";
					for (var i = 0; i < data.length; i++) {
						var obj = data[i];
						options = options + "<option value='"+obj.code+"'>"+obj.name+"</option>";
					}
					$("#city").empty();//清空之前的列表残余
					$("#city").append(options);
				},
			}
			$.ajax(obj);
	}
</script>

通过市级地区的改变通过异步的方法来改变县级地区的下拉列表

建立县级下拉列表

	<select id = "county">
		<option value="">--请选择县区--</option>
	</select>

建立script方法来获取县级下拉列表参数值

<script>
	function countyChange(){
		var parentCode = $("#city").val();
		if(parentCode==""){//防止出现为空的情况 ，如果全部为空则所有下拉列表皆为省级
			$("#county").empty();
			$("#county").append("<option value=''>--请选择县区--</option>");
			return;
		}
		var obj = {
				url:"./AreaServlet?parentCode="+parentCode,
				//type:"",
				//data:"",
				//dataType:"json",
				success:function(data){
					data = JSON.parse(data);
					var options = "";
					for (var i = 0; i < data.length; i++) {
						var obj = data[i];
						options = options + "<option value='"+obj.code+"'>"+obj.name+"</option>";
					}
					$("#county").empty();
					$("#county").append(options);
				},
			}
			$.ajax(obj);
	}
</script>

总结

每一个下一级的方法，通过上一级的改变来使用onchange()方法，添加异步的方法，加入json数据结构，使其来实现级联的形式，但要注意为空的情况。要把逻辑关系缕清。要熟练使用模块化开发。