ajax异步请求问题_H5之家 - 中国HTML5教程资源分享第一站

现在有一需求，使用ajax实现局部刷新，后台使用ssh,刚学不知道怎么弄

当点击下一页或者就成这样了，分页就成这种了

页面源码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body>  <form action="listUser" method="post"> <div> 按姓氏模糊查询:<input type="text" value="${userName }"/> <input type="submit" value="查询"/> <input type="reset" value="清空"/> </div>  <table cellpadding="2" cellspacing="1" bgcolor="#D1DDAA"> <tr bgcolor="#E7E7E7"> <td colspan="7" bgcolor="#9DDF75"> <div> <div>用户列表:  </div> <div> <img alt="注册" src="image/user.png"> <a href="${pageContext.request.contextPath }/registForm">用户注册</a>    <img alt="批量删除" src="image/del.png"> <a href="javascript:void(0)">批量删除</a>    <img alt="报表" src="image/chart.png"> <a href="javascript:void(0)">报表</a> </div> </div> </td> </tr> <tr bgcolor="#FAFAF1"> <th><input type="checkbox" />全选</th> <th>姓名</th> <th>密码</th> <th>生日</th> <th>操作</th> </tr> <s:iterator value="users"> <tr bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FDC4B7';" > <td> <input type="checkbox" value="<s:property value='id'/>"> </td> <td><s:property value="name" /></td> <td><s:property value="pass" /></td> <td><s:property value="birth" /></td> <td> <a href="${pageContext.request.contextPath }/findUser?userId=<s:property value='id' />">编辑</a>  |  <a href="javascript:void(0)">删除</a> </td> </tr> </s:iterator>  <tr bgcolor="#FAFAF1"> <td colspan="7" bgcolor="#fff"> <div> <span> 共${totalCount }条记录，一共${totalPage }页，转到 <s:select list="curPageNum" onchange="change(this.value,'%{userName == null ? aa : userName }')" headerKey="-1" headerValue="页数" theme="simple"/> </span>            <a href="javascript:void(0)">首页</a> | <a href="javascript:void(0)">上一页</a> | <a href="javascript:void(0)">下一页</a>| <a href="javascript:void(0)">尾页</a> </div> </td> </tr> </table> </form> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> /* 下拉 */ var change = function(curPage,userName){ /* $("#info").load("${pageContext.request.contextPath }/listUser?curPage=" + curPage.substring(1,2) + "&userName=" + userName); */ $.ajax({ type:"POST", url:"${pageContext.request.contextPath }/listUser", data:{"curPage":curPage.substring(1,2),"userName":userName}, dataType:"html", success:function(data){ } }); } /* 分页查询 */ var page = function(curPage,userName){ //将每页中选中记录再次选中 isCheck(); $("#info").load("${pageContext.request.contextPath }/listUser?curPage=" + curPage + "&userName=" + userName); } </script> </body> </html>