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" οnclick="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" οnclick="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"也就是小类加载成功后继续加载功效

页面展示：