ssm框架--用ajax做弹窗分页、搜索

最新推荐文章于 2025-06-11 11:24:11 发布

呵呵菜鸟

最新推荐文章于 2025-06-11 11:24:11 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ssm框架文章标签： ssm框架弹出分页异步请求 ajax

本文链接：https://blog.youkuaiyun.com/java_xuetu/article/details/62266960

ssm框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个学生信息管理系统的实现，包括HTML界面设计、JavaScript交互逻辑、后台Controller处理逻辑及MySQL数据库结构。该系统支持分页显示、搜索筛选等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做管理系统，会用到很多弹窗，而这些弹窗很多时候会用到分页和搜索，下面我自己写了一个小demo，总结了下。

html代码：

<body>
	<input type="button" value="选择学生" id="buttons">
	<input type="hidden" id="pageNo">
	<input type="hidden" id="indexNo">
	<br/><br/><br/><br/><br/>
	
	<div style="display: none;" id="div1">
		<table align="center" width="50%" border="1">
			<tr>
				<td>学生姓名：<input type="text" id="name"></td>
				<td>学生班级：<input type="text" id="banji"></td>
				<td>学生老师：<input type="text" id="laoshi"></td>
				<td><input type="button" id="button_sousuo" value="搜索"></td>
			</tr>
		</table>
		<br/><br/><br/>
		<table align="center" width="50%" border="1">
			<tr>
				<td>学生id</td>
				<td>学生姓名</td>
				<td>学生班级</td>
				<td>学生老师</td>
				<td>操作</td>
			</tr>
			<tbody id="students"></tbody>
		</table>
		<table align="center" width="50%" border="1">
			<tr>
				<tbody id="foot"></tbody>
			</tr>
		</table>
	</div>
</body>

js代码：

<script type="text/javascript">
	
	//弹窗
	$("#buttons").click(function(){
		studnet();
		$("#div1").fadeIn();
	});
	
	//异步得到数据
	function studnet(){
		//搜索条件
		var name=$("#name").val();
	    var banji=$("#banji").val();
	    var laoshi=$("#laoshi").val();
	    //当前页数
	    var pageNo=$("#pageNo").val();
	    
		$.ajax({
			url:"Student/getList",
			type:"post",
			dataType:"json",
			data:{"pageNo":pageNo,"name":name,"banji":banji,"laoshi":laoshi},
			success:function(result){
				var _html='';
				var count=result.count;//总记录数
				var pageNo=result.pageNo;//当前页数
				var indexNo=result.indexNo;//总页数
				$("#pageNo").val(pageNo);
				$("#indexNo").val(indexNo);
				for(var i=0;i<result.list.length;i++){
					_html +='<tr>'+
						'<td>'+result.list[i].id+'</td>'+
						'<td>'+result.list[i].name+'</td>'+
						'<td>'+result.list[i].banji+'</td>'+
						'<td>'+result.list[i].laoshi+'</td>'+
						'<td><input type="radio" value=""></td>'+
					'</tr>';
				}
				$("#students").html(_html);
				//<a>首页</a> <a>上一页</a> <a>下一页</a> <a>尾页</a></td>
				var foot='<td>共有'+count+'条数据，当前'+pageNo+'/'+indexNo+'页 ';
				foot +='';
				if(pageNo==1){
					foot +='<a href="#">首页</a> <a href="#">上一页</a> ';
				}else {
					foot +='<a href="javascript:pageChange('+1+')">首页</a> <a href="javascript:pageChange('+2+')">上一页</a> ';
				}
				
				if(pageNo == indexNo){
					foot +='<a href="#">下一页</a> <a href="#">尾页</a> ';
				}else{
					foot +='<a href="javascript:pageChange('+3+')">下一页</a> <a href="javascript:pageChange('+4+')">尾页</a>';
				}
				foot +='</td>';
				$("#foot").html(foot);
			} 
		});
	}
	
	//分页
	function pageChange(type){
		if(type == '1'){
		   $("#pageNo").val("1");
		}else if(type == '2'){
		   if($("#pageNo").val() > '1'){
		      $("#pageNo").val(parseInt($("#pageNo").val()) - 1);
		   }
		}else if(type == '3'){
		   if($("#pageNo").val() < $("#indexNo").val()){
		      $("#pageNo").val(parseInt($("#pageNo").val()) + 1);
		}
		}else if(type == '4'){
		   $("#pageNo").val($("#indexNo").val());
		}else if(type == '5'){
		   var page = parseInt($("#pageNumFor").val()) > parseInt($("#indexNo").val()) ? $("#indexNo").val() : $("#pageNumFor").val();
		   $("#pageNo").val(page);
		}
		studnet();
	}
	

	//传感器条件查询
	$('#button_sousuo').click(function () {
		var pageNo=$("#pageNo").val() == "0"?1:$("#pageNo").val();
		if(pageNo > 1){
		 pageNo = 1;
		}
		$("#pageNo").val(pageNo)
		studnet();
	})
</script>

controller代码：

	@ResponseBody
	@RequestMapping("/getList")
	public Map<String, Object> getList(HttpServletRequest request,String name,String banji,String laoshi){
		Map<String, Object> map=new HashMap<String, Object>();
		
		int pageNo = (request.getParameter("pageNo") != null && request.getParameter("pageNo") != "") ? Integer.valueOf(request.getParameter("pageNo")) : 1;
		int pageSize = LIST_PAGE_SIZE;
		int count = (request.getParameter("count") != null) ? Integer.valueOf(request.getParameter("count")) : 0;
		if(count==0){
		    count=studentSerrvice.getCount(name,banji,laoshi);
		}
		//查询全部传感器信息
		List<Student> list=studentSerrvice.getList(name,banji,laoshi,(pageNo - 1) * pageSize,pageSize);
		
		map.put("list", list);
		map.put("count", count);
		map.put("pageSize", pageSize);
		map.put("pageNo", pageNo);
		map.put("indexNo", count % pageSize == 0 ? count/pageSize:count/pageSize+1);

		map.put("name", name);
		map.put("banji", banji);
		map.put("laoshi", laoshi);
		
		return map;
	}

mysql代码：

drop table if exists student;
create table student(
	id int(11) unsigned not null auto_increment comment '学生id',
	name varchar(32) comment '学生名字',
	banji varchar(32) comment '学生班级',
	laoshi varchar(32) comment '学生老师',
	primary key (`id`)
)engine = innodb auto_increment = 99 default charset = utf8 comment='学生表';

如何有朋友要跑这个功能，可能会遇到一个问题，就是controller里面的@ResponseBody 注解使用不了，这个要使用，是必须ssm中要配置的，可以百度一下这个注解，我是最开始也是在这个注解上面耗了一段时间的。