首先我在controller中有一个添加数据的方法:
@RequestMapping(value="/emp",method=RequestMethod.POST) public String addEmpl(Employee employee) { System.out.println("添加的员工数据:"+employee); employeeService.addEmp(employee); return "redirect:/emps"; }
目的:我要用ajax请求数据封装到该方法中,并且添加完成后回到含有添加数据后的页//模态框保存按钮的事件
$("#emp_save_btn").click(function() { $.ajax({ type : "post", url : "${APP_PATH}/emp", data : $("#empAddModal form").serialize(),//序列化模态框中的数据 方便解析到employee对象 // async : false, success : function(result) { } }); //关闭模态框 $("#empAddModal").modal('hide'); });
结果:无事发生 数据的确添加到数据库中 但是controller内部请求转发并没有执行
原因:ajax 他只是对数据的处理 在执行完成后会把所有的结果放到result中 对数据的操作 因此整个过程中数据添加成功,但是并没用继续执行controller内部的重定向
造成的影响:需要重新刷新才能看到添加后的数据。
解决办法:在result内部执行页面跳转,同时也可以在添加后立马看到数据所在的页面
//模态框保存按钮的事件 $("#emp_save_btn").click(function() { $.ajax({ type : "post", url : "${APP_PATH}/emp", data : $("#empAddModal form").serialize(), // async : false, success : function(result) { window.location.href="${APP_PATH}/emps?pn="+${pageInfo.pages}; } }); //关闭模态框 $("#empAddModal").modal('hide'); });
总结:在配合rest风格实现数据的crud上 使用ajax无疑实现开发效率倍增 ,好的模版插件的应用将开发效率增加到最大