当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是这样的三级联动,当然也会有更简单的插件方法,但学习,我们可以通过这来看它运行的过程。我么要实现的需求是这样的:页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中
出现对应的该市下面的区/县信息
分析这个实现过程大致可以这样:1、创建页面:页面中有三个下拉框,分别为省、市、区/县
2、页面加载成功发起ajax请求,请求省的信息,并将响应结果 填充到省下拉框中
3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求 请求该省下的市信息,并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求 请求该市下的区/县信息,并将数据填充到区/县下拉框中
数据库呢我们可以这样去构建:
创建表(area):存储了省、市、区/县信息设计表实现一:只存储了数据,但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二:
地区id:areaid
地区名:areaname
地区上级id:parentid
建表语句:
Create table area (areaid int auto_increment primary key,areaname varchar(10) not null,
parenteid int(20) not null,arealevlel int(2) not null,status int(3) not null)
创建好表之后就可以进行项目的构建了,在mvc思想下进行项目分层:
首先在pojo层新建实体类Area,他的属性为:要添加共有取值赋值方法等,带参无参构造等;
package com.bjsxt.pojo;
public class Area {
private int areaid;
private String areaname;
private int parentid;
private int arealevel;
private int status;
之后便是业务服务层,要有AreaServive接口与其实现方法
package com.bjsxt.service;
import java.util.List;
import com.bjsxt.pojo.Area;
public interface AreaService {
List selByPid(int parentid);
}
package com.bjsxt.service.impl;
import java.util.List;
import com.bjsxt.dao.AreaDao;
import com.bjsxt.dao.impl.AreaDaoImpl;
import com.bjsxt.pojo.Area;
import com.bjsxt.service.AreaService;
public class AreaServiceImpl implements AreaService {
AreaDao ad= new AreaDaoImpl();
@Override
public List selByPid(int parentid) {
return ad.selByPid(parentid);
}
}
数据处理层
package com.bjsxt.dao;
import java.util.List;
import com.bjsxt.pojo.Area;
public interface AreaDao {
List selByPid(int parentid);
}
数据层实现类
ackage com.bjsxt.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.bjsxt.dao.AreaDao;
import com.bjsxt.pojo.Area;
import com.bjsxt.util.DBUtil;
public class AreaDaoImpl implements AreaDao {
@Override
public List selByPid(int parentid) {
//声明Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
List list=new ArrayList<>();
try {
conn=DBUtil.getConnection();
String sql="select * from area where parentid=?";
ps = conn.prepareStatement(sql);
ps.setInt(1, parentid);
rs=ps.executeQuery();
while(rs.next()){
Area ar=new Area();
ar.setAreaid(rs.getInt("areaid"));
ar.setAreaname(rs.getString("areaname"));
ar.setParentid(rs.getInt("parentid"));
ar.setArealevel(rs.getInt("arealevel"));
ar.setStatus(rs.getInt("status"));
list.add(ar);
}
} catch (SQLException e) {
// TODO Auto-generated catch blocke.printStackTrace();
}finally{
DBUtil.closeAll(rs, ps, conn);
}
return list;
}
}
还有DBUtil工具类,就是连接数据库操作的一个工具类,很多种,就不列出来了。
接下来就servlet的构建
package com.bjsxt.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.bjsxt.pojo.Area;
import com.bjsxt.service.AreaService;
import com.bjsxt.service.impl.AreaServiceImpl;
import com.google.gson.Gson;
public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置编码格式req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//获取请求数据
int parentid = Integer.parseInt(req.getParameter("parentid"));
//处理请求数据AreaService ar= new AreaServiceImpl();
List list= ar.selByPid(parentid);
//处理响应//直接相应resp.getWriter().write(new Gson().toJson(list));
}
}
项目展示jsp页面构建
%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
My JSP 'select.jsp' starting page$(function() {
//默认省的信息getData(0,"pre");
//选择市$("#pre").change(function(){
var areaid=$("#pre").val();
getData(areaid,"shi");
})
//县的信息$("#shi").change(function(){
var areaid=$("#shi").val();
getData(areaid,"xian");
})
function getData(areaid,sid) {
$.get("area",{parentid:areaid},function(data){
//将省数据放入到下拉框//使用eval将数据转化为json格式对象eval("var areas="+data);
var sel=$("#"+sid);
sel.empty();
//遍历:for(var i=0;i
sel.append(""+areas[i].areaname+"");
}
$("#"+sid).trigger("change");
})
}
})
省:
市:
县: