关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)
以下内容是自己理解的，因为还没有看过相关的文章，所以，技术上还是有很大的欠缺。不过这也是自己努力思考得到的，如果有什么更好的建议可以回复我。
1. 任务需求： 实现一个包含数据的表格，并且有分页功能。
2. 效果图：（如图一）
（图一）
3. 从全局来理解、分析（暂时不使用JQuery的ajax，只是用JQuery的获取节点操作节点的方法。ajax使用自己写的重构ajax.js）：
当用户点击查询按钮或者点击分页跳转的相关按钮(既首页/上一页/...)的时候，用户就会通过ajax给服务器发送请求，这个请求会被Struts2拦截，然后调用相关的方法，进行查询数据，再将数据以json数组的形式返回到页面，最后ajax调用回调函数对页面的数据进行更改。
大致流程如图二：
（图二）
stuMg.jsp（学生信息管理界面）的页面相关代码如下：
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
function del(id){
if(window.confirm("确定要删除？")){
window.location.href="stu/stu_del.action?id="+id;
}
} function getList(url){
var username = $("#selectTxt").val();
url = url + username;
ajax("GET",url,"true","null","json",mycallback);
}
function mycallback(data){
var html = '<tr><td>总记录：'+data[0].totalRecord+'条</td>';
html = html + '<td>页码：第'+data[0].currentPage+'页/共'+data[0].totalPage+'页</td>'; if(data[0].currentPage - 1 >= 1){
html = html + '<td><input type="button" value="首页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage=1&username=\')"/></td>';
html = html + '<td><input type="button" value="上一页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].currentPage-1)+'&username=\')"/></td>';
}else{
html = html + '<td><input type="button" value="首页" disabled="false" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage=1&username=\')"/></td>';
html = html + '<td><input type="button" value="上一页" disabled="false" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].currentPage-1)+'&username=\')"/></td>';
}
if(data[0].currentPage + 1 <= data[0].totalPage){
html = html + '<td><input type="button" value="下一页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].currentPage+1)+'&username=\')"/></td>';
html = html + '<td><input type="button" value="尾页" onclick="getList(\'/ElectiveSystem/stu/stu_list.action?currentPage='+(data[0].totalPage)+'&username=\')"/></td>';
}else{
html = html + '<td><input type="button" value="下一页" disabled="false" /></td>';
html = html + '<td><input type="button" value="尾页" disabled="false" /></td>';
}
html = html + '</tr>';
$("#pagination tr").remove("tr");
$("#pagination").append(html);
$("#list tr").remove("tr[id!='tr_title']");
if(data[0].currentPage<1){
$("#list").hide();//隐藏<table>
}else{
$("#list").show();//显示<table>
for(var i=1;i<data.length;i++){
var html;
if(i%2!=0){
html = '<tr class="content" bgcolor="#F7F7F7"><td>';
}else{
html = '<tr class="content" bgcolor="#FFFFFF"><td>';
}
html = html + data[i].id+"</td><td>";
html = html + data[i].username+"</td><td>";
html = html + data[i].password+"</td><td>";
html = html + data[i].realName+"</td><td>";
html = html + data[i].stuId+"</td><td>";
html = html + data[i].specialty+"</td>";
html = html + '<td><a href="'+"<c:url value='stu/stu_preEdit.action?id="+data[i].id+"'/>"+'"><input class="edit_btn" type="button" value="修改"/></a><input class="del_btn" type="button" value="删除" onclick="del('+data[i].id+');"/></td></tr>';
$("#list").append(html);
}
}
} </script> </head>
<body>
<div id="nav">
<img alt="主页" src="data:images/shouye.png">
<span id="shouyeTxt">主页 / <span id="url">学生信息管理</span> </span>
</div>
<div id="select">
<input id="selectTxt" name="username" type="text" placeholder="请输入要查询的用户名..."/>
<input class="btn" type="button" value="查询" onclick="getList('/ElectiveSystem/stu/stu_list.action?currentPage=1&username=')"/>
<a href="<c:url value='admin/stuAdd.jsp'/>">
<input class="btn" type="button" value="添加"/>
</a>
</div>
<table align="left" id="list" border="1" style="display: none;"> <tr align="center" class="content" bgcolor="#F7F7F7" id="tr_title">
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>真实姓名</th>
<th>学号</th>
<th>专业</th>
<th>操作</th>
</tr>
</table>
<jsp:include page="../commons/pageList.jsp"/>
</body>
ajax.js（重构的ajax）：
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
var req;
try{
req = new XMLHttpRequest();//支持大部分浏览器
}catch(e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return req;
}
function ajax(method,url,asyn,params,type,callback){
//获得XMLHttpRequest
var xmlHttp = createXMLHttpRequest(); //注册监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.status == 200 && xmlHttp.readyState == 4){
var data;
if("xml" == type){
data = xmlHttp.responseXML;
}else if("text" == type){
data = xmlHttp.responseText;
}else if("json" == type){
var test = xmlHttp.responseText;
data = eval("("+test+")");
}
callback(data);
}
}
//打开链接
xmlHttp.open(method,url,asyn);
//判断请求方式，如果为post的话，就设置Content-type头信息
if("POST" == method){
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//发送请求
xmlHttp.send(params);
}
StuMgAction的执行方法：
public List<Student> findByUsername() {
String hql = "from Student where username like ?";
List<Student> list = stuService.findByUsername(hql, "%" + username + "%");
return list;
}
/**
* 获取学生信息列表
*/
public String list(){
PrintWriter out = null ;
try{
ApplicationContext ac = new ClassPathXmlApplicationContext("classpath:/applicationContext_*.xml");
Pagination pagination = (Pagination) ac.getBean("pagination");
//获取总条数
pagination.setTotalRecord(findByUsername().size());
pagination.setMaxSize(10);//设置每页显示的最大条数
pagination.setCurrentPage(currentPage);//设置当前页
//获取当前页的数据内容
String hql ="from Student where username like ?";
List<Student> stuList = stuService.findByUsername(hql, "%"+username+"%", pagination);
List list = new ArrayList();
if(stuList.size()<=0){
pagination.setCurrentPage(0);
list.add(0,pagination);
}else{
list.add(0, pagination);
list.addAll(stuList);
}
//转换成json数组
JSONArray jsonArray = JSONArray.fromObject(list.toArray());
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
out= response.getWriter();
out.print(jsonArray);
// System.out.println(jsonArray);
out.flush();
}catch(Exception e){
return "input";
}finally{
out.close();
}
return "list";
}
分页栏独立保存一个页面
pagination.jsp
<body>
<table id="pagination">
<tr></tr>
</table>
</body>
Pagination.java 分页对象:
public class Pagination {
private Integer totalRecord=0; //总条数
private Integer totalPage=0;//总页数 -->跟总条数会有分歧，所以，不给总页数提供set()方法。总页数=总条数 % 每页最大数 ！=0？总页数+1：总页数
private Integer maxSize=10; //每页最大数
private Integer currentPage=1; //当前页
public Integer getTotalRecord() {
return totalRecord;
}
public Integer getTotalPage() {
return totalPage = totalRecord % maxSize==0?totalRecord/maxSize:totalRecord/maxSize+1;
}
public Integer getMaxSize() {
return maxSize;
}
public Integer getCurrentPage() {
return currentPage;
}
public void setTotalRecord(Integer totalRecord) {
this.totalRecord = totalRecord;
}
public void setMaxSize(Integer maxSize) {
this.maxSize = maxSize;
}
public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}
}
========接下来稍微细点来讲解===========
4. 细讲：
4.1 stuMg.jsp的作用：
由上面的简单粗暴的解释呢，我们可以知道，stuMg.jsp页面主要是以表格的形式显示从数据库获取得到的数据。其中stuMg.jsp还包含了getList(url)和mycallback(data)方
法getList(url)方法是用来调用ajax.js的ajax()方法的，ajax()方法需要我们给它传入一些值，如：
"GET"-->请求方式;
"url"-->请求地址;
"true"-->是否为异步请求;
"null"-->要传入的参数，如果请求方式为POST的时候一定要写！没有请求参数就写Null,如果请求方式为GET可以不写,写了也传不过去;
"json"-->返回数据的类型;
mycallback-->回调函数。
ajax()在请求成功后，会返回数据，然后根据刚才设定的“返回数据的类型”对数据进行相应的处理。然后把数据传递给callback()方法，让callback()操作stuMg.jsp页面。
4.2 StuMgAction.action：
StuMgAction.action拦截了ajax()请求地址，然后根据struts.xml配置文件来判断选择使用什么方法。在这个例子中，我们是调用了StuMgAction#findByUsername()
和StuMgAction#list()。
StuMgAction#findByUsername()方法通过客户端传递过来的username参数，进行模糊查询，返回list集合。(因为以下有两个list，所以用不同的颜色区分)
StuMgAction#list()方法调用了StuMgAction#findByUsername()方法，来获取list集合，根据list集合的size()方法来获取得到数据的总条数，把该总条数赋值给
Pagination对象。
其中：List<Student> stuList = stuService.findByUsername(hql, "%"+username+"%", pagination);这句代码是说通过业务逻辑层的stuService对象调用
findByUsername(hql,username)的重载方法findByUsername(hql,username,pagination)方法，这个方法比之前多一个参数pagination，主要是用来进行分页查询的。
findByUsername(hql,username,pagination)方法返回了一个list集合。然而我们并不是直接把这个list转换成json数组对象。而是在再创建一个List集合list，给新的list
的索引号为0的进行赋值pagination，因为这样方便我们在stuMg.jsp页面判断返回的数据是否为空，如果为空我们可以隐藏<table>，否则就显示。然后再把list全部
赋给list 。最后才把list转换成json数组对象输出到stuMg.jsp页面。
4.3 mycallback()：
根据action返回来的json数组对象，mycallback()对页面进行操作。（略..看代码）
=====================================================================
结束。
关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)的更多相关文章
- Ajax技术
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- Ajax 技术原理（转）
Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术 即,AJAX是一个[局部刷新 ...
- Fetch：下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- .net中对象序列化技术浅谈
.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储 ...
- SpreadJS 中应用 KnockoutJS 技术
SpreadJS 支持 Knockout (KO)技术, KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新.关于KO的 ...
随机推荐
- 【bzoj2396】神奇的矩阵 随机化
题目描述 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立. 输入 题目可能包含若干组数据.对于每组数据,第一行一个数N,接下来给出三个N*N的矩阵,依次为A.B.C三个矩阵. 输出 ...
- 【bzoj3144】[Hnoi2013]切糕 网络流最小割
题目描述 输入 第一行是三个正整数P,Q,R,表示切糕的长P. 宽Q.高R.第二行有一个非负整数D,表示光滑性要求.接下来是R个P行Q列的矩阵,第z个 矩阵的第x行第y列是v(x,y,z) (1≤x≤ ...
- InputStream 、 InputStreamReader 、 BufferedReader
1.InputStream.OutputStream 处理字节流的抽象类 InputStream 是字节输入流的所有类的超类,一般我们使用它的子类,如FileInputStream等. OutputS ...
- [洛谷P4588][TJOI2018]数学计算
题目大意:有一个数$x$和取模的数$mod$,初始为$1$,有两个操作: $m:x=x\times m$并输出$x\% mod$ $pos:x=x/第pos次操作乘的数$(保证合法),并输出$x\%m ...
- 《c程序设计语言》读书笔记-递归实现快速排序算法
#include <stdio.h> void swap(int v[],int i,int j) { int temp; temp = v[i]; v[i] = v[j]; v[j] = ...
- zjoi2018day1 游记
3.18 这一天乘车来到衢州,这已经是第四次了,来衢州二中考过两次普及,一次提高,都不是特别好. 到了以后先去了宾馆,是在帝京,和NOIP一样的酒店,连房间都是隔壁,然后一进去就连上了隔壁的WIFI ...
- 图表绘制工具--Matplotlib 3
''' [课程3.] 表格样式创建 表格视觉样式:Dataframe.style → 返回pandas.Styler对象的属性,具有格式化和显示Dataframe的有用方法 样式创建: ① Style ...
- git隐藏文件复制
从网上down的开源项目,如何添加到自己的github上呢? 问题:直接复制老项目到自己的目录,隐藏的.git文件不会被复制过去,就算是执行cp命令,也不会复制!导致项目运行会出错!! 解决: ...
- 51Nod 1048 整数分解为2的幂 V2
题目链接 分析: $O(N)$和$O(NlogN)$的做法很简单就不写了...%了一发神奇的$O(log^3n*$高精度$)$的做法... 考虑我们只能用$2$的整次幂来划分$n$,所以我们从二进制的 ...
- [bzoj2301][HAOI2011]Problem B —— 莫比乌斯反演+容斥原理
题意 给定a, b, c, d, k,求出: \[\sum_{i=a}^b\sum_{j=c}^d[gcd(i, j) = k]\] 题解 为方便表述,我们设 \[calc(\alpha, \beta ...