Jquery的ajax 三级联动 03

今天给大家上一下代码吧
jsp界面

开头引用自己写的js文件路径,注意引用顺序
js界面的代码大概思想我给你们捋一下：
首先进入Ajax，中的url 根据路径找到对应的servelet的后台处理方法，往下走，返回一个回调函数，date，这个date可以自己随便给，将得到省的id，将其加入option。
如果省的id，变动了，则根据省的id当作市的父id，进行查询就进行市的加入option
县区也是一样的

$(function(){var ctx=$("#ctx").val();$.ajax({url:ctx+"/regionServlet",success:function(data){for(index in data){console.log(data[index]);$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");//将省进行添加}},dataType:"json"});$("#province").change(function(){$("option:gt(0)","#city").remove();$("option:gt(0)","#county").remove();$.ajax({url:ctx+"/regionServlet?ID="+this.value,success:function(data){for(index in data){console.log(data[index]);$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");}},dataType:"json"});});$("#city").change(function(){$("option:gt(0)","#county").remove();$.ajax({url:ctx+"/regionServlet?ID="+this.value,success:function(data){for(index in data){console.log(data[index]);$("#county").append("<option value='"+data[index].PARENT_ID+"'>"+data[index].REGION_NAME+"</option>");}},dataType:"json"});});})

再给大家看一下后台的一个查询共用方法 jsonBaseDao

public class JsonBaseDao extends BaseDao<Map<String, Object>>{public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean)throws SQLException, InstantiationException, IllegalAccessException {return super.executeQuery(sql, pageBean, new callBack<Map<String, Object>>() {@Overridepublic List<Map<String, Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {// TODO Auto-generated method stub// 1.利用反射 创建一个实例// 2.获取所有属性，并且赋值给实例// 3.将添加完值的实体类装入list容器中List<Map<String, Object>> list = new ArrayList<>();//获取源数据ResultSetMetaData md = rs.getMetaData();//获取列数int columnCount = md.getColumnCount();Map<String, Object> map=null;while(rs.next()) {map=new HashMap<>();for (int i = 1; i < columnCount; i++) {map.put(md.getColumnName(i), rs.getObject(i));}list.add(map);}return list;}});}}

这个dao层方法，继承上面的JsonBaseDao

public List<Map<String, Object>> listR(Map<String, String[]> paraMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String id=JsonUtil.getParamMap(paraMap, "ID");String sql="select * from ch_region where true ";if (StringUtils.isBlank(id)) {sql+="and PARENT_ID=7459";}else {sql+="and PARENT_ID="+id;}return super.executeQuery(sql, null);}}

下面的这个是servelet 调用上面的dao层

public class RegionServlet extends HttpServlet{private RegionDao rdao=new RegionDao();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {try {List<Map<String, Object>> list = rdao.listR(req.getParameterMap(), null);ObjectMapper om=new ObjectMapper();ResponseUtil.write(resp, om.writeValueAsString(list));} catch (InstantiationException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IllegalAccessException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}
}

写出最终的效果还需要一些架包，和其他的方法
我都截图如下

我不知道怎么上传这些架包，等我会了，就上传给你们
好了

Jquery的ajax 三级联动 03相关推荐

jquery省市县三级联动
Jquery省市县三级联动,数据来源js,无需调用接口可前往本人发布资源<Jquery省市县三级>免积分下载目录效果 html部分 <!DOCTYPE html> < ...
jquery实现省市区三级联动
jquery实现省市区三级联动最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是 ...
二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...
ajax三级联动+全国最新省市县数据
写个Ajax三级联动实例,用的最新的全国省市县mysql数据.这里只说一下思路,具体请看源码. 首先看index.php,这是一个省份列表 <?php $conn=mysql_connect ...
jquery省地市三级联动
需要核心文件jquery.cityselect.js,通过ajax访问获取省地市数据文件 /*Ajax 三级省市联动http://code.ciaoca.cn/日期:2012-7-18settings ...
ThinkPHP+AJAX三级联动
sanji.html <!doctype html> <html lang="en"> <head><meta charset=" ...
jquery实现的三级联动地区 jquery插件
(function($){function Dsy(){this.Items = {};}Dsy.prototype.add = function(id,iArray){this.Items[id] ...
jquery xml 省市区三级联动
html部分 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
三级联动数据库添加html,前端jQuery最新省市区三级联动插件，包含sql数据库
一.目录结构二.功能演示 1)用浏览器打开,index.html 2)单击,输入框, 3)选择省份 4).选择城市 5).选择区县 6).显示已选中的名称和ID 三.前端页面html> 地区数 ...

Jquery的ajax 三级联动 03

Jquery的ajax 三级联动 03相关推荐

最新文章

热门文章