一、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 方法可以很简单的实现页面动态加载另一个页面,很实现页面异步操作的捷径。
相关推荐
jquery-get-post-load 方法
jQuery中load()方法语法格式
调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址。 data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件...
使用JQuery load函数异步分页,速度快,效率高,不需要一次性加载绑定查询数据,根据页码和数据数量分段获取。
JQuery Lazyload加载图片实例
一、问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,...使用jquery的load方法来处理这种页面布局框架。 二、load方法详解 1.定义 $(selector).load(URL,data,callback); 必需的 URL 参数规定您希
jQuery_lazyload插件示例Demo
jquery-load-demo
jquery.lazyload图片预加载 调用简单 内有实例
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显,非常美观。
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
jQuery – AJAX load() 方法 jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback); ...
JQuery LazyLoad 图片懒加载实例,相关描述可查看我的博文“JQuery.LazyLoad 实现图片懒加载”
前端项目-jquery.loadtemplate,用于加载和使用模板的jquery插件。该插件设计简单但功能强大,支持从页面内加载模板,或使用Ajax加载HTML文件。
本文档主要讲述Ajax与jquery相结合实现的无数新验证用户时常用的post()方法之二,服务器端以json方式返回数据时的处理办法
jQuery图片延迟加载插件jQuery.lazyload.js,使用延迟加载在可提高网页下载速度以及提高用户体验,也能帮助减轻服务器负载。
下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> [removed] [removed] [removed] $(document).ready(function(){ $(...
一、用法 jquery的load函数是请求另一个文件并加载到当前DOM里的调用,load方法的完整格式是:load( url, [data], [callback] )(注意没有参数是GET方式请求,有参数则是 POST方法)。 * url:是指要导入文件的地址。...