Ajax实现五级联动--（一）
来源：互联网 发布：韩国网络电视成人直播 编辑：程序博客网 时间：2024/06/06 00:12
1、连接数据库util
package com.zt.util;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import java.util.ResourceBundle;public class DBUtil { private static ResourceBundle rb = ResourceBundle.getBundle("jdbc"); static{ try { Class.forName(rb.getString("driver")); } catch (ClassNotFoundException e) { e.printStackTrace(); } } public static Connection getConnection(){ Connection con = null; try { con = DriverManager.getConnection(rb.getString("url"),rb.getString("user"), rb.getString("pwd")); } catch (SQLException e) { e.printStackTrace(); } return con; } public static void closeAll(ResultSet rs , Statement st,Connection con){ try { if(rs!=null) rs.close(); if(st!=null) st.close(); if(con!=null) con.close(); } catch (Exception e) { e.printStackTrace(); } }}2、准备实体类
package com.zt.entity;import java.io.Serializable;public class Area implements Serializable { private static final long serialVersionUID = 1L; private String code; private String name; private int layer; public Area(String code, String name, int layer) { super(); this.code = code; this.name = name; this.layer = layer; } public Area() { super(); } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getLayer() { return layer; } public void setLayer(int layer) { this.layer = layer; } @Override public String toString() { return "Area [code=" + code + ", layer=" + layer + ", name=" + name + "]"; }}3、数据库操作DAO
要实现五级联动，那么就要查出省，市，区县，镇，街道
每一级都需要两个定位，一个layer，一个code
–省
select * from area where layer =1 ;
–市
select * from area where layer=2 and code like ‘50%’;
–县
select * from area where layer=3 and code like ‘5001%’;
–镇
select * from area where layer=4 and code like ‘500101%’;
–街道
select * from area where layer=5 and code like ‘500101001%’;
这里通过DAO方法来实现每一级的查询方法，将layer和code作为参数传递进去
String sql = “select code,name,layer from area where layer=? and code like ?||’%’ “;
前面的问号是我们需要传递进去的值，问号表示一个字符串，这里设计到SQL语句中字符串的拼接，需要用||,这里的%是一个字符串，
package com.zt.dao;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.zt.entity.Area;import com.zt.util.DBUtil;public class AreaDAO { private ResultSet rs = null; private PreparedStatement ps = null; private Connection con = null; /** * 5级联动地址通用方法 * @param area layer等级 code代码 * @return 返回对应的数据 */ public List<Area> getAreaInfo(**Area areaParame**){ List<Area> areas = new ArrayList<Area>(); Area area = null; con = DBUtil.getConnection(); String sql = "select code,name,layer from area where layer=? and code like ?||'%' "; try { ps = con.prepareStatement(sql); ps.setInt(1, areaParame.getLayer()); ps.setString(2, areaParame.getCode()); rs = ps.executeQuery(); while(rs.next()){ area = new Area(rs.getString("code"), rs.getString("name"), rs.getInt("layer")); areas.add(area); } } catch (SQLException e) { e.printStackTrace(); }finally{ DBUtil.closeAll(rs, ps, con); } return areas; }}预处理
**ps.setInt(1, areaParame.getLayer());
ps.setString(2, areaParame.getCode());**
这里预处理设置参数的时候，需要传递layer和code进去，所以这里我们直接传递一个对象进去，用于获取到对应的layer和code
4、逻辑层service
package com.zt.service;import java.util.List;import com.zt.dao.AreaDAO;import com.zt.entity.Area;public class AreaService { private AreaDAO ad = new AreaDAO(); /** * 通用 * @param areaParame * @return */ public List<Area> getAreaInfo(Area areaParame){ return ad.getAreaInfo(areaParame); }}到这里后台的准备工作我们就做好了，那么我们现在只需要将后台的数据传递到前端
5、写前端页面
<body onload="loadBasic(1,this.value);"> 省：<select onchange="loadBasic(2,this.value);"><option>==请选择==</option></select> 市：<select onchange="loadBasic(3,this.value);"><option>==请选择==</option></select> 区：<select onchange="loadBasic(4,this.value);"><option>==请选择==</option></select> 办事处：<select onchange="loadBasic(5,this.value);"><option>==请选择==</option></select> 居委会：<select><option>==请选择==</option></select> </body>这里在页面加载的时候就把layer=1的省查出来，
可以用js方法来写页面的加载事件
function loadProvince(layer,code){ $.post("areaServlet", { layer:layer,code:code },function(data){ console.log(data); },"json"); $.ajax({ type:"POST", url:"areaServlet", data:{ layer:layer,code:code }, dataType:"json", success:function(data){ //var data = eval("("+data+")"); //$(data).each(function(){}); //把获取的数据通过dom方式添加到下拉选择框中 var province = $("select").first(); $.each(data,function(index,area){ province.append("<option value='"+area.code+"'>"+area.name+"</option>"); }); }, error:function(){ alert("失败"); } });这里利用Ajax来获取数据库的对象
$.post("areaServlet", { layer:layer,code:code },function(data){ console.log(data); },"json");这里的意思是请求数据的地址为servlet，前端页面通过js的Ajax方法向servlet中请求后台的数据，然后中间{ layer:layer,code:code }为请求数据的列表，也就是具体的内容，因为这里的页面加载事件需要传递两个参数，layer和code，这里请求的是一个JSON对象，然后function(data){console.log(data); }这里为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。这里是将后台的数据通过参数data返回回来，我们可以通过console.log打印出返回的JSON格式的数据，$.ajax({ type:"POST", url:"areaServlet", data:{ layer:layer,code:code }, dataType:"json", success:function(data){ //var data = eval("("+data+")"); //$(data).each(function(){}); //把获取的数据通过dom方式添加到下拉选择框中 var province = $("select").first(); $.each(data,function(index,area){ province.append("<option value='"+area.code+"'>"+area.name+"</option>"); });同时还可以直接通过
var data = eval(“(“+data+”)”);这里从数据库返回的数据需要用eval来解析返回JSON对象
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
但是为什么eval()里面还需要添加括号呢，前台用jQuery提交数据，后台从jquery请求中获得参数，然后去查询数据库，把查询结果包装成JSON对象返回，在jquery中解析JSON结果
参考博客http://www.cnblogs.com/myjavawork/archive/2011/03/10/1979279.html
*由于json是以”{}”的方式来开始以及结束的，在js中，它会被
当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式
（expression）转化为对象，而不是作为语句（statement）来执行。*
举一个例子，例如对
象字面量{}，如若不加外层的括号，那么eval会将大括号识别为javascript代码块的开始和
结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
alert(eval(“{}”); // return undefined
alert(eval(“({})”);// return object[Object]
对于这种写法，在JS中，可以到处看到。
如: (function()) {}(); 做闭包操作时等。
所以这里
var data = eval(“(“+data+”)”)——>”(” 和 “)”当作两个字符串拼接返回的JSON对象—–》相当于在{}外面添加了（{}）
这里的data是一个DOM对象，还需要转为jQuery对象，然后遍历返回的数据data
jquery的遍历方法
**总结：
这里的item表示每一个元素。i表示每一个元素里面的元素的下标**
下面提一下jQuery的each方法的几种常用的用法
参考博客：http://www.cnblogs.com/zzcit/p/5695172.html
Js代码
var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4
我们向数据查询到所有的省份城市，然后数据库通过JSON对象返回回来，我们也通过eval进行了JSON对象的解析，经过eval解析，现在不是JSON对象，而是一个个的object的对象。相当于一个一维数组。那么现在我们需要将返回的所有省都添加到province的select里面的每一个option里面
//把获取的数据通过dom方式添加到下拉选择框中 var province = $("select").first();----》通过jQuery选择器选择标签select的第一个元素 $.each(data,function(index,area){----》对返回对象进行遍历，这里的index表示每一个对象的每一个元素的的下标，这里相当于一个一维数组，index表示每一个area对象的下标 province.append("<option value='"+area.code+"'>"+area.name+"</option>"); });本来应该是province.append("<option value="+area.code+">"+area.name+"</option>")但是这里的area.code为字符串，需要打引号rovince.append("<option value='area.code'>"+area.name+"</option>")由于是变量rovince.append("<option value='"+area.code+"'>"+area.name+"</option>")那么到这里我们就已经把省份添加到第一个select框里面去了
这里传入的参数为layer=1，code=this.value
添加的时候选中的当前的option，这里的this表示谁调用我我就是谁，this就表示当前的option
- Ajax实现五级联动--（一）
- ajax 实现3级联动
- 2级联动实现方式(ajax)
- Ajax实现省市无穷级联动
- jQuery+ajax+servlet实现4级联动
- php+vue.js 实现省市县乡的四级联动（ajax加载）
- php+vue.js 实现省市县乡的四级联动（ajax加载）
- jquery ajax实现省市县3级联动
- ThinkPHP + Ajax 实现2级联动下拉菜单
- 四级联动，级联菜单，Ajax
- ajax+jQuery 无限级联动
- 无限级联动菜单-AJAX版（附源码下载）
- 无限级联动菜单-AJAX版（附源码下载）
- 无限级联动菜单-AJAX版（附源码下载）
- 无限级联动菜单-AJAX版（附源码下载）
- 无限级联动菜单-AJAX版（附源码下载）
- 无限级联动菜单-AJAX版（附源码下载）
- 无限级联动菜单-AJAX版（附源码下载）
- jdbc java数据库的连接 （oracle数据库）
- Item2+zsh及相关辅助工具的安装及配置
- 反向传播算法- softmax
- python图像操作
- HDU 6168 Numbers
- Ajax实现五级联动--（一）
- Oracle、Mysql、MS sql中关于模糊查询问题
- Leetcode-210: Course Schedule II
- java中的this关键字
- hdu 6170 正则表达式
- (C++)unordered_map 与 map 的对比
- [pattest]1067. 试密码(20)
- 知历史，才可图未来 ——新书《未来简史》解读
- IO流复制多级文件
