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的核心在于创建XMLHttpRequest对象,它负责与服务器进行通信。通过调用其open()方法指定请求类型(GET或POST)、URL和...
总结起来,Ajax实现分页查询涉及客户端JavaScript的Ajax请求、服务器端JSP的处理以及前端的数据解析和展示。通过这种方式,你可以为用户提供流畅的分页体验,同时避免了页面的全量刷新。在实际项目中,还可以结合...
在Web开发中,分页功能是一项非常常见的需求,它...总的来说,AJAX实现的分页功能使得Web应用能够更加动态和响应式,提高了用户的浏览效率,降低了服务器的压力。掌握这项技术对于任何Web开发者来说都是非常有价值的。
本教程将深入探讨ASP.NET AJAX分页的相关知识点,以及如何编写分页代码。 1. **什么是ASP.NET AJAX分页?** ASP.NET AJAX分页是一种通过使用ASP.NET AJAX库(以前称为Atlas)实现的客户端分页方法。它利用...
本教程将围绕“ajax实现分页jquery代码”这一主题,详细介绍如何使用Ajax和jQuery实现动态分页,并讨论如何调整CSS以优化样式。 首先,我们需要引入jQuery库和jQuery分页插件。在HTML文件中,添加以下链接和脚本...
本篇文章将详细介绍如何利用jQuery实现Ajax异步分页,以及其背后的原理和实践应用。 首先,让我们理解什么是Ajax。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容...
本篇将深入探讨如何使用Ajax实现这一功能。 首先,我们需要理解Ajax的基本原理。Ajax允许我们在不刷新整个页面的情况下,与服务器进行后台数据交互。它通过创建XMLHttpRequest对象发送HTTP请求,并处理服务器返回的...
在这个特定的案例中,"PHP+AJAX实现分页"是一个常见的需求,它允许用户在不刷新整个页面的情况下加载更多数据,提升用户体验。下面我们将详细探讨这一主题。 首先,分页是一种组织大量数据的方法,它将数据分割成可...
本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能。 首先,理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。...
本文将深入探讨如何利用Ajax实现分页功能,以及相关的核心知识点。 ### 一、Ajax基础 Ajax是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。通过...
例如,可以使用LIMIT和OFFSET关键字来实现分页。LIMIT用于指定每页的记录数,OFFSET则用于跳过前几条记录,从而获取特定页的数据。 以下是实现步骤的概述: 1. 创建JSP页面,设置HTML结构,包括表格和分页导航栏。...
总结,这个项目展示了如何在Java Web环境中,利用SSM框架处理业务逻辑,Maven管理依赖,通过Ajax实现前后端交互以达到动态分页效果。每个环节都体现了现代Web开发的组件化和模块化思想,对于理解和实践Java Web开发...
### 使用SSM框架中的Ajax实现自定义分页数据 在Web开发中,为了提升用户体验、减少服务器负担,分页功能的实现变得尤为重要。而在实际应用中,Ajax技术因其能够实现局部刷新、异步加载等功能而被广泛应用于动态加载...
Ajax(Asynchronous JavaScript and XML)技术的引入,使得页面在不进行整个页面刷新的情况下实现分页,极大地提升了用户体验。本篇文章将深入探讨如何利用Ajax技术实现分页。 一、Ajax基础 Ajax的核心在于创建...
在网页开发中,分页是一种常见的数据展示方式...总之,使用Ajax实现分页功能能够提升用户体验,避免了传统页面跳转带来的加载延迟。通过熟练掌握Ajax通信和前端分页的实现,我们可以创建更加流畅和高效的Web应用程序。
三、Ajax实现分页查询步骤 1. 创建Ajax请求:在JavaScript中,我们使用XMLHttpRequest对象(或fetch API)创建一个HTTP请求,指定请求类型(GET或POST)、URL以及可能的数据。 2. 发送请求:向服务器发送请求,同时...
本教程重点讨论如何利用Ajax与Java结合实现高效、动态的分页功能。 首先,理解Ajax(Asynchronous JavaScript and XML)的核心概念:异步更新页面内容,无需刷新整个页面。这极大地提高了用户体验,因为用户可以...
- **前端框架**:如React、Vue或Angular等,它们提供了更高级的组件化方法,可以通过内置的Ajax库(如axios)和虚拟DOM轻松实现分页。 **注意事项:** 1. **SEO优化**:由于Ajax分页是异步加载的,对于搜索引擎爬虫...
使用java,jsp,mysql实现Ajax分页。可以观察到ajax按需获取数据,异步交互的过程。这个代码可以直接引用到其他需要分页的地方。booklist.jsp是前台显示页面,getbooks.jsp是后台与数据库操作页面,creathttp.js是...