您的位置：首页 > 编程语言 > Java开发

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

2015-04-29 11:32 375 查看

以下内容是自己理解的，因为还没有看过相关的文章，所以，技术上还是有很大的欠缺。不过这也是自己努力思考得到的，如果有什么更好的建议可以回复我。

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="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()对页面进行操作。（略..看代码）

=====================================================================

结束。

　　

　

　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航