jQuery:load()方法
阿新 • • 發佈:2019-01-22
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"也就是小類載入成功後繼續載入功效
頁面展示: