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);
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值