Ajax-JS实现地址三级联动

使用了Gson和JSON解析jar包。使用了全国省市县区的数据库。
具体项目案例:点我下载
前台页面简单展示:

<div class="xl-dz">
省份: <select name="province" id="province"
    onchange="onSelectChange(this,'city');">
select> <br /> 城市: <select name="city" id="city"
    onchange="onSelectChange(this,'district');">
    <option value="">请选择option>
select> <br /> 区(县): <select name="district" id="district">
    <option value="">请选择option>
select>
div>

JS+Ajax:
实际就是根据前一个输入框的id发送Ajax请求,在后台查询父ID是传入ID的数据集合,然后JSON格式传入前台,JS显示即可。

<script type="text/javascript">
function onSelectChange(obj, toSelId) {
    //将select对象传入,传入下一级选项的id字符串,调用下面的方法
    setSelect(obj.value,toSelId);
}
function setSelect(fromSelVal, toSelId) {
    $.ajax({
        url : "user?method=address",
        cache : false,/*cache设为false将不缓存此页面 */
        data : "parentId=" + fromSelVal,
        success : function(data) {
            /* 成功调用回调函数 */
            createSelectObj(data,toSelId);
        }
    });
}

function createSelectObj(data, toSelId) {
    //解析后台传入的数据,
    var arr = jsonParse(data);
    //判断数据是否为空
    if (arr != null && arr.length > 0) {
        //获取下一级id对象
        var obj = document.getElementById(toSelId);
        //清空操作。
        obj.innerHTML="";
        //创建请选择option对象。
        var nullOp = document.createElement("option");
        //设置option的值
        nullOp.setAttribute("value", "");
        //增加option一个请选择的初始化文本节点
        nullOp.appendChild(document.createTextNode("请选择"));
        //把option增加到select之上。
        obj.appendChild(nullOp);
        //循环遍历出后台传过来的json数据
        for ( var o in arr) {
            //创建option节点对象
            var op = document.createElement("option");
            //把json中的每一个下标的id传入
            op.setAttribute("value", arr[o].id);
            //op.text=arr[o].name;//这一句在ie下不起作用,用下面这一句或者innerHTML
            //创建文本节点赋值每一个下标的名称
            op.appendChild(document.createTextNode(arr[o].name));
            //增加子节点
            obj.appendChild(op);
        }
    }
}
//默认设置1级,显示全部省。
setSelect('1', 'province');
script>

后台Servlet代码:后台简单查询传入的父类ID值

    String parentId = request.getParameter("parentId");
    if(parentId == null || parentId==""){
        parentId = "0";//如果传的父结点为空,则默认赋值为中国的父结点,也就是每一级查询所有省份。
    }
    Connection conn = null;
    String json = "";
       try{
           Class.forName("com.mysql.jdbc.Driver");
           conn = DriverManager.getConnection("jdbc:mysql://localhost/forge" , "root" , "root");
           Statement stat = conn.createStatement();
           ResultSet rs = stat.executeQuery("select region_id,region_name from region where parent_id = "+parentId);
           ArrayList rsList = new ArrayList();
           Map map = null;
           while(rs.next()){
            map = new HashMap();
            map.put("id", rs.getInt(1));
            map.put("name", rs.getString(2));
            rsList.add(map);
           }
           rs=null;
           Gson gson = new Gson();
           json = gson.toJson(rsList);
           System.out.println("json="+json);
       } catch (ClassNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } finally{
        if(conn != null){
            try {
                conn.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
       }
    response.setCharacterEncoding("UTF-8");//防止出现中文乱码现象
    response.getWriter().print(json);
}

你可能感兴趣的:(JavaEE)