一、JQuery load 方法可以在一個頁面動態加載另一個頁面。這個特性的應用場景是查詢頁面。傳統的查詢頁面是：輸入查詢條件，點擊“搜索”后，提交表單，到查詢條件傳輸到后台，獲取數據后，跳轉到原頁面，然后通過循環顯示查詢到的結果。這樣的不足是：頁面會閃動，體驗不好。
二、使用JQuery load 方法可以更好的解決這個問題。方法如下：
（1）先在查詢頁面定義一個div：
Html代碼
1 <div id="tableDataId"></div>
注：這個div將會顯示我們查詢到的結果信息，如：一個List集合數據。
（2）在JS定義使用load 加載數據頁面的方法：
Js代碼
1 function loadData(param) { 2 var url = base+"/product/findEditConfContractData.action #confContractTableId"; 3 if (param != undefined) { 4 $("#tableDataId").load(url,param,rolbck); 5 } else { 6 $("#tableDataId").load(url, rolbck); 7 } 8 }
注：load 方法可以接收三個參數，第一個是URL，這個參數是必選的，另二個參數是可選的。第二個參數是：參數，也就是查詢條件，必須封裝成JSON格式的參數，第三個參數是回調函數。
Js代碼
1 function searchFormByBotton() { 2 var param = {}; 3 param["mobileContractManageRpcDto.contractName"] = $.trim($("#configurationContractForm").find("input[name='mobileContractManageRpcDto.contractName']").val()); 4 param["mobileContractManageRpcDto.contractType"] = $('#contractTypeId').val(); 5 loadData(param); 6 }
注：剛點擊“搜索”按鈕時，調用這個方法。方法的功能是封裝查詢條件。
（3）findEditConfContractData.action 這人action 處理完業務請求后，返回到一個頁面，頁面內容如下：
Java代碼
1 <table id="confContractTableId" width="1010" cellspacing="0" cellpadding="0" border="0" class="tab01"> 2 <thead> 3 <tr> 4 <th width="58"><input class="chk_all" name="" id="chk_all" type="checkbox" value="" /></th> 5 <th width="93">名稱1</th> 6 <th width="580">名稱2</th> 7 <th width="90">名稱3</th> 8 <th width="90">名稱4</th> 9 <th width="85">名稱5</th> 10 </tr> 11 </thead> 12 <tbody> 13 <#assign productList = mobileContractPage?if_exists.resultList> 14 <#list productList?if_exists as mobileContractManageRpc> 15 <tr> 16 <td><input name="chk_list" class="contractTabCss" type="checkbox" value="${(mobileContractManageRpc.id)!''}" /></td> 17 <td>${(mobileContractManageRpc.id)!''}</td> 18 <td><p class="contract_num">${(mobileContractManageRpc.contractName)!''}</p></td> 19 <td><span class="blueText">${(mobileContractManageRpc.setMealCount)!''}</span></td> 20 <td><span class="blueText">${(mobileContractManageRpc.productCount)!''}</span></td> 21 <td><span class="blueText">${(mobileContractManageRpc.contractType)!''}</span></td> 22 </tr> 23 </#list> 24 </tbody> 25 </table>
注：table 中的id值等於 URL 中 #confContractTableId 。
（4）最后的結果是：table中的內容會顯示在div中，如下：
Html代碼
1 <div id="tableDataId"> 2 <table id="confContractTableId" width="1010" cellspacing="0" cellpadding="0" border="0" class="tab01"> 3 <thead> 4 <tr> 5 <th width="58"><input class="chk_all" name="" id="chk_all" type="checkbox" value="" /></th> 6 <th width="93">名稱1</th> 7 <th width="580">名稱2</th> 8 <th width="90">名稱3</th> 9 <th width="90">名稱4</th> 10 <th width="85">名稱5</th> 11 </tr> 12 </thead> 13 <tbody> 14 <#assign productList = mobileContractPage?if_exists.resultList> 15 <#list productList?if_exists as mobileContractManageRpc> 16 <tr> 17 <td><input name="chk_list" class="contractTabCss" type="checkbox" value="${(mobileContractManageRpc.id)!''}" /></td> 18 <td>${(mobileContractManageRpc.id)!''}</td> 19 <td><p class="contract_num">${(mobileContractManageRpc.contractName)!''}</p></td> 20 <td><span class="blueText">${(mobileContractManageRpc.setMealCount)!''}</span></td> 21 <td><span class="blueText">${(mobileContractManageRpc.productCount)!''}</span></td> 22 <td><span class="blueText">${(mobileContractManageRpc.contractType)!''}</span></td> 23 </tr> 24 </#list> 25 </tbody> 26 </table> 27 </div>
總結：JQuery 中load 方法可以很簡單的實現頁面動態加載另一個頁面，很實現頁面異步操作的捷徑。