一、JQuery load 方法可以在一个页面动态加载另一个页面。这个特性的应用场景是查询页面。传统的查询页面是:输入查询条件,点击“搜索”后,提交表单,到查询条件传输到后台,获取数据后,跳转到原页面,然后通过循环显示查询到的结果。这样的不足是:页面会闪动,体验不好。
二、使用JQuery load 方法可以更好的解决这个问题。方法如下:
(1)先在查询页面定义一个div:
<div id="tableDataId"></div>
注:这个div将会显示我们查询到的结果信息,如:一个List集合数据。
(2)在JS定义使用load 加载数据页面的方法:
function loadData(param) { var url = base+"/product/findEditConfContractData.action #confContractTableId"; if (param != undefined) { $("#tableDataId").load(url,param,rolbck); } else { $("#tableDataId").load(url, rolbck); } }
注:load 方法可以接收三个参数,第一个是URL,这个参数是必选的,另二个参数是可选的。第二个参数是:参数,也就是查询条件,必须封装成JSON格式的参数,第三个参数是回调函数。
function searchFormByBotton() { var param = {}; param["mobileContractManageRpcDto.contractName"] = $.trim($("#configurationContractForm").find("input[name='mobileContractManageRpcDto.contractName']").val()); param["mobileContractManageRpcDto.contractType"] = $('#contractTypeId').val(); loadData(param); }
注:刚点击“搜索”按钮时,调用这个方法。方法的功能是封装查询条件。
(3)findEditConfContractData.action 这人action 处理完业务请求后,返回到一个页面,页面内容如下:
<table id="confContractTableId" width="1010" cellspacing="0" cellpadding="0" border="0" class="tab01">
<thead>
<tr>
<th width="58"><input class="chk_all" name="" id="chk_all" type="checkbox" value="" /></th>
<th width="93">名称1</th>
<th width="580">名称2</th>
<th width="90">名称3</th>
<th width="90">名称4</th>
<th width="85">名称5</th>
</tr>
</thead>
<tbody>
<#assign productList = mobileContractPage?if_exists.resultList>
<#list productList?if_exists as mobileContractManageRpc>
<tr>
<td><input name="chk_list" class="contractTabCss" type="checkbox" value="${(mobileContractManageRpc.id)!''}" /></td>
<td>${(mobileContractManageRpc.id)!''}</td>
<td><p class="contract_num">${(mobileContractManageRpc.contractName)!''}</p></td>
<td><span class="blueText">${(mobileContractManageRpc.setMealCount)!''}</span></td>
<td><span class="blueText">${(mobileContractManageRpc.productCount)!''}</span></td>
<td><span class="blueText">${(mobileContractManageRpc.contractType)!''}</span></td>
</tr>
</#list>
</tbody>
</table>
注:table 中的id值等于 URL 中 #confContractTableId 。
(4)最后的结果是:table中的内容会显示在div中,如下:
<div id="tableDataId">
<table id="confContractTableId" width="1010" cellspacing="0" cellpadding="0" border="0" class="tab01">
<thead>
<tr>
<th width="58"><input class="chk_all" name="" id="chk_all" type="checkbox" value="" /></th>
<th width="93">名称1</th>
<th width="580">名称2</th>
<th width="90">名称3</th>
<th width="90">名称4</th>
<th width="85">名称5</th>
</tr>
</thead>
<tbody>
<#assign productList = mobileContractPage?if_exists.resultList>
<#list productList?if_exists as mobileContractManageRpc>
<tr>
<td><input name="chk_list" class="contractTabCss" type="checkbox" value="${(mobileContractManageRpc.id)!''}" /></td>
<td>${(mobileContractManageRpc.id)!''}</td>
<td><p class="contract_num">${(mobileContractManageRpc.contractName)!''}</p></td>
<td><span class="blueText">${(mobileContractManageRpc.setMealCount)!''}</span></td>
<td><span class="blueText">${(mobileContractManageRpc.productCount)!''}</span></td>
<td><span class="blueText">${(mobileContractManageRpc.contractType)!''}</span></td>
</tr>
</#list>
</tbody>
</table>
</div>
总结:JQuery 中load 方法可以很简单的实现页面动态加载另一个页面,很实现页面异步操作的捷径。