关于在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的 ...
随机推荐
- redis各种数据结构使用场景
一.redis 数据结构使用场景 原来看过 redisbook 这本书,对 redis 的基本功能都已经熟悉了,从上周开始看 redis 的源码.目前目标是吃透 redis 的数据结构.我们都知道,在 ...
- TypeScript 3.0下react默认属性DefaultProps解决方案
ts和react的默认属性的四种解决方案 Non-null assertion operator(非空断言语句) Component type casting(组件类型重置) High order f ...
- web服务器集群session同步
在做了web集群后,你肯定会首先考虑session同步问题,因为通过负载均衡后,同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,一个登录用户,一会是登录状态,一会又不是 ...
- hdu 1172 猜数字
猜数字 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 洛谷 P2155 [SDOI2008]沙拉公主的困惑 解题报告
P2155 [SDOI2008]沙拉公主的困惑 题目描述 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为\(1\)到\(N\)的阶乘,但是,政府只发行编号与\(M!\ ...
- 为基于busybox根文件系统的ARM嵌入式Linux交叉编译dropbear使能SSH
原创作品,允许转载,转载时请务必以超链接形式标明文章.作者信息和本声明,否则将追究法律责任. 最近使用busybox为基于ARM的板卡定制了一个极简单的根文件系统,由于busybox仅支持telnet ...
- 【POJ 3080 Blue Jeans】
Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 19026Accepted: 8466 Description The Genogr ...
- oracle 查看表空间的脚本
SELECT upper(f.tablespace_name) "表空间名", d.Tot_grootte_Mb "表空间大小(M)", d.Tot_groot ...
- bzoj 4765 普通计算姬 dfs序 + 分块
题目链接 Description "奋战三星期,造台计算机".小G响应号召,花了三小时造了台普通计算姬.普通计算姬比普通计算机要厉害一些.普通计算机能计算数列区间和,而普通计算姬能 ...
- 转 linux下cat命令详解
linux下cat命令详解 http://www.cnblogs.com/perfy/archive/2012/07/23/2605550.html 简略版: cat主要有三大功能:1.一次显示整个文 ...