深圳做网站 百度智能小程序,杭州百度整站优化服务,上海心橙科技网站建设,沈阳建设工程造价当我们做一些例如注册页面的时候#xff0c;可能会遇到要选择地址的操作#xff0c;这时会出现三个选择框#xff0c;当你选择省级单位的时候会自动在选择筐中#xff0c;弹出她所属的市级单位的列表#xff0c;当选择市级单位时又会弹出县级单位#xff0c;我们要实现的…当我们做一些例如注册页面的时候可能会遇到要选择地址的操作这时会出现三个选择框当你选择省级单位的时候会自动在选择筐中弹出她所属的市级单位的列表当选择市级单位时又会弹出县级单位我们要实现的就是这样的三级联动当然也会有更简单的插件方法但学习我们可以通过这来看它运行的过程。我么要实现的需求是这样的页面中有三个下拉框选项分别为省下拉框市下拉框区/县下拉框选择省则市下拉框中出现对应的该省下的市信息选择市则区/县下拉框中出现对应的该市下面的区/县信息分析这个实现过程大致可以这样1、创建页面页面中有三个下拉框分别为省、市、区/县2、页面加载成功发起ajax请求请求省的信息并将响应结果 填充到省下拉框中3、选择省触发一个新的js函数 的执行该函数中发起新的ajax请求 请求该省下的市信息并将响应数据填充到市下拉框4、选择市信息触发一个新的js函数的执行该函数中发起新的ajax请求 请求该市下的区/县信息并将数据填充到区/县下拉框中数据库呢我们可以这样去构建创建表(area)存储了省、市、区/县信息设计表实现一只存储了数据但是数据之间的层级关系没有存储。 地区id:areaid 地区名:areaname设计表实现二 地区id:areaid 地区名:areaname 地区上级idparentid建表语句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 {ListArea 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();Overridepublic ListArea selByPid(int parentid) {return ad.selByPid(parentid);}}数据处理层package com.bjsxt.dao;import java.util.List;import com.bjsxt.pojo.Area;public interface AreaDao {ListArea 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 {Overridepublic ListArea selByPid(int parentid) {//声明Connection connnull;PreparedStatement psnull;ResultSet rsnull;ListArea listnew ArrayList();try {connDBUtil.getConnection();String sqlselect * from area where parentid?;ps conn.prepareStatement(sql);ps.setInt(1, parentid);rsps.executeQuery();while(rs.next()){Area arnew 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 {Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//设置编码格式req.setCharacterEncoding(utf-8);resp.setContentType(text/html;charsetutf-8);//获取请求数据int parentid Integer.parseInt(req.getParameter(parentid));//处理请求数据AreaService ar new AreaServiceImpl();ListArea list ar.selByPid(parentid);//处理响应//直接相应resp.getWriter().write(new Gson().toJson(list));}
}项目展示jsp页面构建% page languagejava importjava.util.* pageEncodingutf-8%
%
String path request.getContextPath();
String basePath request.getScheme()://request.getServerName():request.getServerPort()path/;
%!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadbase href%basePath%titleMy JSP select.jsp starting page/titlemeta http-equivpragma contentno-cachemeta http-equivcache-control contentno-cachemeta http-equivexpires content0 meta http-equivkeywords contentkeyword1,keyword2,keyword3meta http-equivdescription contentThis is my page!--link relstylesheet typetext/css hrefstyles.css--script typetext/javascript srcjs/jquery-1.9.1(1).js/scriptscript typetext/javascript$(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 areasdata);var sel$(#sid);sel.empty();//遍历for(var i0;iareas.length;i){sel.append(option valueareas[i].areaidareas[i].areaname/option);}$(#sid).trigger(change); })}
})/script/headbody stylebackground-color: activecaption;text-align:center div stylemargin: auto;width800px;margin-top: 200px省select name idpre stylewidth:200px;height:30px;/select市select name idshi stylewidth:200px;height:30px;/select县select name idxian stylewidth:200px;height:30px;/select/div/body
/html
