ajax异步请求问题
现在有一需求，使用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" id="info">
<div align="center" style="margin-top:0px;color:red;float:none;">
按姓氏模糊查询:<input type="text" name="userName" value="${userName }"/>
<input type="submit" name="Submit" value="查 询"/>
<input type="reset" name="Submit" onclick="clearInput()" value="清 空"/>
</div>
<!-- 显示所有 -->
<table width="99%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px">
<tr bgcolor="#E7E7E7">
<td height="29" colspan="7" bgcolor="#9DDF75">
<div style="margin-left:1px;">
<div style="float:left">用户列表: </div>
<div align="right" style="float:right; width:1100px;">
<img alt="注册" src="image/user.png">
<a href="${pageContext.request.contextPath }/registForm">用户注册</a>
<img alt="批量删除" src="image/del.png">
<a href="javascript:void(0)" onclick="delUserByIds()">批量删除</a>
<img alt="报表" src="image/chart.png">
<a href="javascript:void(0)" onmouseover="show()">报表</a>
</div>
</div>
</td>
</tr>
<tr align="center" bgcolor="#FAFAF1" height="22">
<th width="10%"><input type="checkbox" name="itemAll" onclick="checkAll(this)" />全选</th>
<th width="20%">姓名</th>
<th width="15%">密码</th>
<th width="25%" onclick="sort()">生日</th>
<th width="30%">操作</th>
</tr>
<s:iterator value="users">
<tr align='center' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FDC4B7';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22" >
<td>
<input type="checkbox" name="item" value="<s:property value='id'/>" onclick="check(<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)" onclick="delUser(<s:property value='id' />)">删除</a>
</td>
</tr>
</s:iterator>
<!-- 分页 -->
<tr bgcolor="#FAFAF1">
<td height="28" colspan="7" bgcolor="#fff">
<div align="center" style="float:none;">
<span style="color:red;">
共${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)" onclick="page(1,'${userName == null ? aa : userName }')">首页</a> |
<a href="javascript:void(0)" onclick="page('${(curPage-1) == 0 ? 1 : (curPage-1) }','${userName == null ? aa : userName }')">上一页</a> |
<a href="javascript:void(0)" onclick="page('${curPage == totalPage ? totalPage : (curPage+1)}','${userName == null ? aa : userName }')">下一页</a>|
<a href="javascript:void(0)" onclick="page('${totalPage}','${userName == null ? aa : userName }')">尾页</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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
请仔细看 jQuery 文档 —— load 方法在 URL 后可以跟 jQuery 选择符，来过滤要填充的 HTML～
引用来自“南漂一卒”的评论
jQuery load 方法是 ajax、html 两个方法的封装，不需要你再调用 ajax 方法了～[29] 参见 —— http://www.css88.com/jqapi-1.9/load/
jQuery load 方法是 ajax、html 两个方法的封装，不需要你再调用 ajax 方法了～[29] 参见 —— http://www.css88.com/jqapi-1.9/load/