关于在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的 ...

随机推荐

glGenTextures
http://blog.sina.com.cn/s/blog_67ede2d80100w3i8.html glGenTextures(GLsizei n, GLuint *textures)函数说明 ...
OpenCV实践之路——人脸检测（C++/Python) 【转】
转自:http://blog.csdn.net/xingchenbingbuyu/article/details/51105159 版权声明:本文为博主原创文章,转载请联系作者取得授权. 本文由@星沉 ...
C++开发资源汇总
这次的资源涉及到了标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等,C++程序员学习必备! Jason frozen : C/C++的Jason解析生成器 Jansson ...
Dom4J读写xml
解析读取XML public static void main(String[] args) { //1获取SaxReader对象 SAXReader reader=new SAXReader(); ...
MongoDB中$redact操作符的使用
介绍 redact <- redaction 修订/校验,意思是对文档内容进行过滤,选择一些过滤或保留的信息 . access level 存取等级有三种: - $$DESCEND 返回当前等 ...
SQL Server中JOIN的用法
JOIN 分为:内连接(INNER JOIN).外连接(OUTER JOIN).其中,外连接分为:左外连接(LEFT OUTER JOIN).右外连接(RIGHT OUTER JOIN).全外连接(F ...
Appium+python自动化21-DesiredCapabilities详解【转载】
Appium Desired Capabilities Desired Capabilities 是由 keys 和 values 组成的 JSON 对象. 举个简单例子: { "platf ...
MVC中路由器程序
MVC中路由器程序编写方式如下例子把地址:/home/add?id=1 改写成:/home/add/1 把地址:/home/edit?id=1&sid=2 改写成:/home/edit/1_ ...
（3）新概念英语一（11-20）lessons
12 13 14 15 16 17 18无单词 19 20
51nod 1420 数袋鼠好有趣【贪心】
1420 数袋鼠好有趣题目来源: CodeForces 基准时间限制:1 秒空间限制:131072 KB 分值: 40 难度:4级算法题收藏关注有n只袋鼠.每只袋鼠的大小用一个整数表示. ...

关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)

关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)的更多相关文章

随机推荐

热门专题