一个面试题（jquery里面的load方法如何用）

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