学习目标
- （1）Ajax
- （2）bootstrap
- （3）pageHelper
Ajax提交json给控制器方法
k1=v1&k2=v2 是由$(’#update_form’).serialize() 不是json
{k1:v1,k2:v2}
- （1）控制器方法
@RequestMapping(path = “/update2”, method = RequestMethod.POST,consumes = "application/json")
public String update2(@RequestBody Department department) - （2）postman提交
- （3）前台页面提交
$.ajax()contentType:"application/json;charset=UTF-8",
DepartmentV3Controller
@Controller
@RequestMapping("/deptv3")
public class DepartmentV3Controller {
private static final Logger l = LoggerFactory.getLogger(DepartmentV3Controller.class);
@Autowired
IDepartmentService iDepartmentService;
@RequestMapping(path="/addUI",method = RequestMethod.GET)
public String addUI(){
return "add_dept";
}
@RequestMapping(path="/add",method = RequestMethod.POST,consumes = "application/json")
public @ResponseBody Object add(@RequestBody Department dept){
//{did:0,dname:IOS}
l.info("add dept="+dept);
try {
iDepartmentService.saveDepartment(dept);
return Result.init(200,"添加成功",null);
} catch (Exception e) {
e.printStackTrace();
}
return Result.init(-200,"添加失败",null);
}
}
postman测试Controller
add_dept.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<%
pageContext.setAttribute("path", request.getContextPath());
%>
<head>
<title>Title</title>
<!-- 引入-->
<script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn_add').click(function () {
//js发送请求
var dname= $('#add_dname').val()
console.info(dname)
$.ajax({
url:'${path}/deptv3/add',
async:true,
data:'{"did":"","dname":"'+dname+'"}',
type:"post",
contentType:"application/json;charset=UTF-8",
success:function (result) {
//js接收结果
if(200==result.code){
alert(result.msg) //js更新页面
//刷新列表
}
},
error:function () {
alert('服务问题，请求失败')
}
});
})
})
</script>
</head>
<body>
<div id="addDiv">
<h1>添加页面</h1>
<form id="add_form" >
<input type="hidden" name="did" id="add_did"/><br/>
<input type="text" name="dname" id="add_dname"/><br/>
<input id="btn_add" type="button" value="保存"/><br/>
</form>
</div>
</body>
</html>