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"也就是小類加載成功後繼續加載功效

頁面展示：