`

页面下拉加载更多数据(spring MVC)

 
阅读更多
var SEE_MORE={p:1,loading:false,hasData:true};
//下拉到底 js 判断
    $(window).scroll(function () {
		   loadData();
	});
	function loadData() {
	    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
	    if ($(document).height() <= totalheight +300) {
	        //下啦加载时运行
	        loadmore();
	            
	    }
	}

	<%//加载更多 %>
	function loadmore(){
		if(!SEE_MORE.loading&&SEE_MORE.hasData){
			SEE_MORE.loading = true;
			var path='${ctx}/liveClass/listMore';
			$.post(path+'?size=6&pageNum='+SEE_MORE.p,function(data){
				if($.trim(data)!=''){
					$('#courseContainer').append(data);
					
					SEE_MORE.p++;
				}
				SEE_MORE.loading = false;
			},'html');
		}
	};

 

<!-- 隐藏域 获取 页数, 总数/pageSize -->
<input type="hidden" value="${liveClassListCount/6 }" id="pageNumberId">

<div class="container">
	<ul class="live_list" id="courseContainer">
		<%@include file="live_list_more.jsp"%>
	</ul>
</div>

 live_list_more.jsp 和正常jsp一样  获取后台绑定的参数就行

分享到:
评论

相关推荐

    Spring web MVC和spring 2.0 form tag解说

    - `&lt;form:select&gt;`和`&lt;form:option&gt;`: 用于创建下拉列表,可以动态加载选项。 - `&lt;form:errors&gt;`: 显示验证错误信息,帮助用户快速定位问题。 **5. Form Tag使用示例** ```jsp 用户名: 邮箱: 提交" ...

    Ajax级联下拉列表.rar

    级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据前一个选择动态地加载相关数据。这通常用于处理有层级关系的数据,如国家-城市-区县的选择,或者类别-子类别-...

    EasyUI框架实例

    2. **Ajax通信**:EasyUI的许多组件支持异步加载数据,这通常需要配合Spring MVC的RESTful API实现。在后台,我们需要定义处理Ajax请求的控制器方法,返回JSON数据。在前端,通过EasyUI的API调用这些接口,实现页面...

    MVC_AJAX_省市联动

    AJAX允许Web页面在不重新加载整个页面的情况下,与服务器进行异步通信。在这个项目中,AJAX用于向后台发送请求,获取省市区的数据,然后动态更新页面上的选择框,实现联动效果。通常,这会涉及到XMLHttpRequest对象...

    基于 Java 17 Spring Boot 3 Spring Security 6 Vue 3 Eleme

    Spring Security 6还可能引入了更多安全最佳实践,帮助开发者构建更安全的应用。 Vue 3是Vue.js的最新版本,它在性能、API设计和生态系统方面进行了全面升级。Vue 3采用了Composition API,允许开发者更灵活地组织...

    JSP+AJAX三级级联及更多级的实现

    在Web开发中,JSP(JavaServer Pages)和AJAX...总的来说,“JSP+AJAX三级级联及更多级的实现”是一个典型的前后端协同工作,通过动态交互提升用户体验的实例,展示了Web开发中数据获取和页面更新的灵活性。

    AJAX重构+级联下拉列表

    在"java web前台级联下拉列表代码"中,我们可以推测这个项目是用Java作为后端语言,使用Servlet或Spring MVC等框架处理AJAX请求。前端可能使用纯JavaScript,或者结合jQuery、Vue.js、React等库来实现交互。文件名...

    带复选框的下拉菜单

    - **Java**:在Java环境中,可以使用Spring MVC或其他MVC框架来处理用户的选择数据。当用户提交表单时,后端会接收到前端发送的多选数据,然后根据这些数据进行相应的业务逻辑处理。 - **JSP/Servlet**:对于动态...

    分页通过下拉框选择每页显示的个数

    在Web应用开发中,分页是一项非常常见的功能,它能够帮助用户更有效地浏览大量数据,而不会一次性加载所有内容导致页面加载慢或者内存压力大。本项目是基于MyBatis和SpringMVC框架实现的分页功能,同时支持模糊查询...

    仿微信实现语音表情以及文字的发送

    在“高仿微信”的实现中,可能还需要考虑用户界面设计,如聊天界面布局、消息气泡样式、滑动刷新、下拉加载更多等。此外,为了提升用户体验,可以实现语音进度条显示、离线消息推送、未读消息提示等功能。 最后,...

    下拉列表中tip

    在实际场景中,下拉列表的提示信息实现会根据具体需求和技术栈有所不同,可能涉及更多的前端框架(如React, Vue, Angular)或者后端框架(如Spring MVC)的使用。如果你能提供更多的信息,我可以给出更精确的技术...

    Ztree+treeTable实现 Java实现 树形菜单 树形表格

    在Java项目中,我们通常会结合后台服务(如Spring MVC或Servlet)来动态生成Ztree的数据源,然后通过Ajax请求传递到前端进行渲染。 1. **Ztree的配置与使用**: Ztree的配置主要涉及JSON数据格式和HTML结构。你...

    Freemarker通用select下拉框

    Freemarker是一个强大的模板引擎,常用于Web应用中的视图层渲染,比如Spring MVC框架中的JSP替代技术。本示例关注的是如何在Freemarker(FTL)中创建一个通用的`select`下拉框,以满足各种Web界面中的下拉选择需求。...

    struts2+spring3+hibernate3实现商城系统

    在商城系统中,jQuery可能被用来实现页面的动态加载、下拉菜单、轮播图、表单验证等增强用户体验的功能。 在文件名为`e_shop`的压缩包中,我们可以预期找到与这个商城系统相关的源代码、配置文件、数据库脚本、静态...

    省市县三级联动

    3. JSP前端:JSP页面上,使用`&lt;select&gt;`标签创建下拉菜单,通过AJAX异步请求获取后端返回的地区数据,动态生成下拉选项。可以选择使用jQuery或其他JavaScript库来实现AJAX请求。 二、DWR(Direct Web Remoting)...

    easyUI项目

    另一方面,提到bootstrap作为门户页面,这表明项目中可能存在一个或多个主入口页面,采用了Bootstrap的栅格系统、导航栏、下拉菜单等元素,以实现响应式布局,适应不同设备的屏幕大小。Bootstrap的使用使得门户页面...

    j2ee实现的仿Goole、百度搜索下拉提示

    在Google和百度等搜索引擎中,这一功能是通过Ajax(Asynchronous JavaScript and XML)实现的,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。 在J2EE环境下,实现这个功能通常需要...

    jquery-easyui-1.5.3

    在版本 1.5.3 中,EasyUI 继续保持着对易用性和功能性的追求,为Web应用的开发带来了更多可能。 一、jQuery EasyUI 的核心概念 1. **组件化**:EasyUI 提供了众多预定义的组件,如对话框(dialog)、表格...

    J2EE开发之常用开源项目介绍

    相较于Hibernate,iBATIS更加轻量级,对于那些需要更多控制权的开发者来说,iBATIS可能是一个更好的选择。 - **特点**: - 相较于Hibernate更为灵活,更适合对性能有较高要求的应用。 - 可以直接编写SQL语句,...

    Java二级联动

    4. **AJAX技术**:异步JavaScript和XML的缩写,虽然现在更多地使用JSON格式。在Java二级联动中,AJAX可以用来在不刷新整个页面的情况下,向服务器发送请求获取数据,使得用户体验更加流畅。通过`XMLHttpRequest`对象...

Global site tag (gtag.js) - Google Analytics