`
379548695
  • 浏览: 154607 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

ajax实现的分页代码(二)

阅读更多
jsp页面的实现
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'TestJson.jsp' starting page</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/Page.js"></script>
		<script type="text/javascript">	    
		function gotoPage(id){	    
		  var url = 'testJson.do';  
		  var pars = 'page='+id;	  		
		  new Ajax.Request( url, 
		                  { method: 'get', 
		                  parameters: pars, 
		                  onComplete: showResponse 
		                  }
		                  );
	  }	
    	var myGlobalHandlers = {
			onCreate: function(){
				Element.show('systemWorking');
			},
	
			onComplete: function() {
				if(Ajax.activeRequestCount == 0){
					Element.hide('systemWorking');
				}
			}
		};
		Ajax.Responders.register(myGlobalHandlers);
	  function shows(){	    
		  var url = 'testJson.do';  
		  var pars = '';	  		
		  new Ajax.Request( url, 
		                  { method: 'get', 
		                  parameters: pars, 
		                  onComplete: showResponse 
		                  }
		                  );
	  }	
		function showResponse(originalRequest)	{	   
		   jsonRaw = originalRequest.responseText;	   
		   jsonContent = eval("(" + jsonRaw + ")");
		   var cP=jsonContent.cP;
		   var tP=jsonContent.tP;
		   var tN=jsonContent.tN;
		   showPages(cP,tP,tN);	   
		   finalResponse = "<b>" + jsonContent.dw.length + " matches found in range</b><br/>";	  
		   for (i = 0; i < jsonContent.dw.length; i++) {
		        finalResponse += "<hr/>";
		        finalResponse += "<i>dwdm:</i> " + jsonContent.dw[i].dwdm + "<br/>";          
		        finalResponse += "<i>dwmc:</i> " + jsonContent.dw[i].dwmc + "" ;                                       
		   }	   
		   $("result").innerHTML = finalResponse;
			}
    </script>
	</head>

	<body onload="shows()">
		<div id='systemWorking'
			style="z-index: 999; display: none; border: 1px solid #0e0; background-color: #efe; padding: 2px; margin-top: 8px; width: 300px; font: normal 12px Arial; color: #090">
			数据加载中...
		</div>
		<div id="page"></div>
		<div id="result"></div>
	</body>
</html>



后台数据生成的json格式。
  • 描述: 效果如上
  • 大小: 12.5 KB
分享到:
评论

相关推荐

    Ajax实现分页代码

    本知识点将深入探讨如何使用Ajax实现分页功能。 首先,理解Ajax的基本原理是至关重要的。Ajax的核心在于创建XMLHttpRequest对象,它负责与服务器进行通信。通过调用其open()方法指定请求类型(GET或POST)、URL和...

    Ajax实现分页查询

    总结起来,Ajax实现分页查询涉及客户端JavaScript的Ajax请求、服务器端JSP的处理以及前端的数据解析和展示。通过这种方式,你可以为用户提供流畅的分页体验,同时避免了页面的全量刷新。在实际项目中,还可以结合...

    AJAX实现分页功能

    在Web开发中,分页功能是一项非常常见的需求,它...总的来说,AJAX实现的分页功能使得Web应用能够更加动态和响应式,提高了用户的浏览效率,降低了服务器的压力。掌握这项技术对于任何Web开发者来说都是非常有价值的。

    asp.net AJAX分页 分页代码

    本教程将深入探讨ASP.NET AJAX分页的相关知识点,以及如何编写分页代码。 1. **什么是ASP.NET AJAX分页?** ASP.NET AJAX分页是一种通过使用ASP.NET AJAX库(以前称为Atlas)实现的客户端分页方法。它利用...

    ajax实现分页jquery代码

    本教程将围绕“ajax实现分页jquery代码”这一主题,详细介绍如何使用Ajax和jQuery实现动态分页,并讨论如何调整CSS以优化样式。 首先,我们需要引入jQuery库和jQuery分页插件。在HTML文件中,添加以下链接和脚本...

    基于 jQuery 实现的 Ajax 异步分页

    本篇文章将详细介绍如何利用jQuery实现Ajax异步分页,以及其背后的原理和实践应用。 首先,让我们理解什么是Ajax。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容...

    ajax异步分页代码

    本篇将深入探讨如何使用Ajax实现这一功能。 首先,我们需要理解Ajax的基本原理。Ajax允许我们在不刷新整个页面的情况下,与服务器进行后台数据交互。它通过创建XMLHttpRequest对象发送HTTP请求,并处理服务器返回的...

    PHP+AJAX实现 分页

    在这个特定的案例中,"PHP+AJAX实现分页"是一个常见的需求,它允许用户在不刷新整个页面的情况下加载更多数据,提升用户体验。下面我们将详细探讨这一主题。 首先,分页是一种组织大量数据的方法,它将数据分割成可...

    Jquery Ajax分页(有实例)

    本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能。 首先,理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。...

    ajax分页代码

    本文将深入探讨如何利用Ajax实现分页功能,以及相关的核心知识点。 ### 一、Ajax基础 Ajax是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。通过...

    Java Ajax分页,jsp ajax分页

    例如,可以使用LIMIT和OFFSET关键字来实现分页。LIMIT用于指定每页的记录数,OFFSET则用于跳过前几条记录,从而获取特定页的数据。 以下是实现步骤的概述: 1. 创建JSP页面,设置HTML结构,包括表格和分页导航栏。...

    SSM(Spring+mybatis+Springmvc)+maven+Ajax实现分页功能

    总结,这个项目展示了如何在Java Web环境中,利用SSM框架处理业务逻辑,Maven管理依赖,通过Ajax实现前后端交互以达到动态分页效果。每个环节都体现了现代Web开发的组件化和模块化思想,对于理解和实践Java Web开发...

    ajax实现分页

    ### 使用SSM框架中的Ajax实现自定义分页数据 在Web开发中,为了提升用户体验、减少服务器负担,分页功能的实现变得尤为重要。而在实际应用中,Ajax技术因其能够实现局部刷新、异步加载等功能而被广泛应用于动态加载...

    利用Ajax技术实现分页

    Ajax(Asynchronous JavaScript and XML)技术的引入,使得页面在不进行整个页面刷新的情况下实现分页,极大地提升了用户体验。本篇文章将深入探讨如何利用Ajax技术实现分页。 一、Ajax基础 Ajax的核心在于创建...

    ajax简单分页代码

    在网页开发中,分页是一种常见的数据展示方式...总之,使用Ajax实现分页功能能够提升用户体验,避免了传统页面跳转带来的加载延迟。通过熟练掌握Ajax通信和前端分页的实现,我们可以创建更加流畅和高效的Web应用程序。

    基于 ajax 实现的分页查询

    三、Ajax实现分页查询步骤 1. 创建Ajax请求:在JavaScript中,我们使用XMLHttpRequest对象(或fetch API)创建一个HTTP请求,指定请求类型(GET或POST)、URL以及可能的数据。 2. 发送请求:向服务器发送请求,同时...

    Ajax实现Java分页

    本教程重点讨论如何利用Ajax与Java结合实现高效、动态的分页功能。 首先,理解Ajax(Asynchronous JavaScript and XML)的核心概念:异步更新页面内容,无需刷新整个页面。这极大地提高了用户体验,因为用户可以...

    ajax 分页 ajax分页

    - **前端框架**:如React、Vue或Angular等,它们提供了更高级的组件化方法,可以通过内置的Ajax库(如axios)和虚拟DOM轻松实现分页。 **注意事项:** 1. **SEO优化**:由于Ajax分页是异步加载的,对于搜索引擎爬虫...

    java实现ajax分页

    使用java,jsp,mysql实现Ajax分页。可以观察到ajax按需获取数据,异步交互的过程。这个代码可以直接引用到其他需要分页的地方。booklist.jsp是前台显示页面,getbooks.jsp是后台与数据库操作页面,creathttp.js是...

Global site tag (gtag.js) - Google Analytics