项目模块
第一步:建立省市区三级数据库
具体大家可以上网上百度查询地区源码
这里给出建表源码
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数据结构,使其来实现级联的形式,但要注意为空的情况。要把逻辑关系缕清。要熟练使用模块化开发。