jQuery:load()方法

jquery的load()方法可以加载页面或数据到指定的元素，通常用于联动的页面效果，下面是示例：

一，简单的加载页面

<select name="bigSortId" id="bigSortId" onChange="getSmallSort()"><option value="">请先选择一级分类</option><c:forEach items="${bigSorts}" var="sort"><option ${item.bigSortId==sort.id?'selected="selected"':''} value="${sort.id}">${sort.name}</option></c:forEach></select><select name="smallSortId" id="smallSortId"><option value="">请选择二级分类</option><c:forEach items="${smallSorts}" var="small"><option ${item.smallSortId==small.id?'selected="selected"':''} value="${small.id}">${small.name}</option></c:forEach>                              </select><script>function getSmallSort(){       var bigSortId = $("#bigSortId").val();       if(bigSortId == '' || bigSortId == null){       return;       }$("#smallSortId").load("${ROOT}/admin/zone/action/findSmortSort.jsp?bigSortId="+bigSortId);}</script>

findSmortSort.jsp

<%@ page contentType="text/html; charset=GBK" pageEncoding="GBK" session="false" %><%@ include file="/admin/common/sys-adm.jspf" %><%    AuthFacade.instatnce().checkRight(43, loginUser.getUserId());    long bigSortId = T.longValue(request.getParameter("bigSortId"), 0);if(bigSortId<0){return;}List<SmallSort> smallSorts = SortService.instance().getListBybigSortId(bigSortId);request.setAttribute("smallSorts", smallSorts);%><option value="">请选择二级分类</option><c:forEach items="${smallSorts}" var="small"><option ${small.id == item.smallSortId ? 'selected="selected"' : ''} value="${small.id}">${small.name}</option></c:forEach>

需求：选择一级分类后，二级分类自动填充选择框。

这里我们利用onChange事件来绑定一级分类的选择，每次一级分类的修改都会触发onChange事件，我们可以看到getSmallSrot方法里$("#smallSortId").load(）指定了为id=smallSortId的元素加载页面findSmortSort.jsp，加载完后会完全覆盖指定元素下的内容。

页面展示：

二，load(url,data,function(response,status,xhr){})

<tr><td width="8%"><span class="star">*</span>大类名</td><td><c:forEach items="${bigSorts}" var="b"><input type="checkbox" onclick="getSmallSorts()" id="bids" name="bids" value="${b.id}"  ${item.containBigSort(b.id) ? 'checked':''}/>${b.name} </c:forEach></td><td>请先选择大类，再选择小类和功效</td></tr><tr><td>小类名</td><td id="sids"><c:forEach items="${smallSorts}" var="s"><input type="checkbox" onclick="getEfficacys()" name="sids" value="${s.id}" ${item.containSmallSort(s.id) ? 'checked':''}/>${s.name} </c:forEach></td><td></td></tr><tr> <td>所属小类功效</td><td id="eids"><c:forEach items="${efficacys}" var="e"><input type="checkbox" name="eids" value="${e.id}" ${item.containEfficacy(e.id) ? 'checked':''}/>${e.name} </c:forEach></td><td></td></tr><script>function getSmallSorts(){    var id = "${id}";    var obj=document.getElementsByName('bids');    if(obj == null || obj == ''){        return;    }    var bids='';    for(var i=0; i<obj.length; i++){        if(obj[i].checked){            bids+=obj[i].value+',';        }    }         $("#sids").load("${ROOT}/admin/commentTemplate/action/getSmortSorts.jsp?id="+id+"&bids="+bids,function(responseTxt,statusTxt,xhr){        if(statusTxt=="success"){            var object=document.getElementsByName('sids');            if(object != null && object != ''){                var sids='';                for(var i=0; i<object.length; i++){                    if(object[i].checked){                        sids+=object[i].value+',';                    }                }                 $("#eids").load("${ROOT}/admin/commentTemplate/action/getEfficacys.jsp?id="+id+"&sids="+sids);            }        }                });        }</script>

需求：大类可多选，联动出大类下的小类，小类可多选，联动出小类下的功效，功效可多选
我们首先要明白，这三级分类是互相关联的，大类的改变会同时触动小类和功效的改变，小类的改变只触动功效的改变；因此在大类改变时除了重新加载对应的小类后还需要重新加载功效；
$("#sids").load("${ROOT}/admin/commentTemplate/action/getSmortSorts.jsp?id="+id+"&bids="+bids,function(responseTxt,statusTxt,xhr){}
funchtion方法规定了当请求完成时运行的函数，判断statusTxt=="success"也就是小类加载成功后继续加载功效

页面展示：