Ajax实现五级联动--（一）

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(url,[data],[callback],[type])说明：这个函数跟$.post(url,[data],[callback],[type])说明：这个函数跟$.get()参数差不多，多了一个type参数，type为请求 的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就 和$.get()返回的格式一样，都是字符串的

$.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>");
            });

同时还可以直接通过.post的父方法$.post的父方法$.ajax来获取后台的数据，他们的形式很像，只是换了一种形式而已，$.ajax换成了JSON格式，
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的遍历方法
.each()和$.each()和$().each

**总结：
.each(arr,function()alert（this）)—−>一维数组这里的this表示每一个元素$.each(arr,function()alert（this）)—->一维数组这里的this表示每一个元素$.eahc( arr, function( i, item){ alert( item[i]) } )—->二维数组
这里的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

().each在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，

我们向数据查询到所有的省份城市，然后数据库通过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