关于在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的 ...
随机推荐
- Android使用adb命令查看CPU信息
Android中使用JNI编程的时候会需要编译出不同的SO文件,以供适配不同的机型. 例如: 由此需要查看不同机型的CPU信息. 使用ADB命令查看CPU信息命令如下: 1. adb shell 2. ...
- [洛谷P3509][POI2010]ZAB-Frog
题目大意:有$n$个点,每个点有一个距离(从小到大给出),从第$i$个点跳一次,会跳到距离第$i$个点第$k$远的点上(若有两个点都是第$k$远,就跳到编号小的上).问对于从每个点开始跳,跳$m$次, ...
- 刷题总结——Interval query（hdu4343倍增+贪心）
题目: Problem Description This is a very simple question. There are N intervals in number axis, and M ...
- java 复习整理（五 类加载机制与对象初始化）
类加载机制与对象初始化 一 . 类加载机制 类加载机制是指.class文件加载到jvm并形成Class对象的机制.之后应用可对Class对象进行实例化并调用.类加载机制可在运行时动态加载外部的类, ...
- 道路修建（bzoj 2435）
Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿意修建恰好 n – 1条双向道路. ...
- poj 3744 Scout YYF 1 (概率DP+矩阵快速幂)
F - Scout YYF I Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Sub ...
- Android的CheckBox(多选框)
1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- OpenCV实践之路——人脸检测（C++/Python) 【转】
转自:http://blog.csdn.net/xingchenbingbuyu/article/details/51105159 版权声明:本文为博主原创文章,转载请联系作者取得授权. 本文由@星沉 ...
- redis加入到Windows系统服务
1.cmd命令,到redis的安装目录输入以下命令 安装命令: redis-server.exe --service-install redis.windows.conf --loglevel ve ...
- 一篇好文档，请Thymeleaf Layout Dialect
Thymeleaf Layout Dialect https://ultraq.github.io/thymeleaf-layout-dialect/ This will introduce the ...