一、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 方法可以很简单的实现页面动态加载另一个页面，很实现页面异步操作的捷径。
