JQuery load 方法使用

最新推荐文章于 2024-07-14 09:36:50 发布

原创最新推荐文章于 2024-07-14 09:36:50 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #ViewUI

java 综合同时被 3 个专栏收录

103 篇文章

订阅专栏

JSP & Web

37 篇文章

订阅专栏

DWR+Ext+JQuery+Ajax

11 篇文章

订阅专栏

本文介绍如何利用jQuery load方法在查询页面上动态加载数据，从而避免传统查询页面的页面闪动问题，提升用户体验。通过定义div、JS方法封装查询条件并加载数据页面，最终实现在查询条件提交后，页面内容无缝更新的效果。

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