1、SpringMVC快速的完成ajax功能?
1)、返回数据是json就ok;
2)、页面,$.ajax();
2、原生javaWeb:
1)、导入GSON;
2)、返回的数据用GSON转成json
3)、写出去;
3、SpringMVC-ajax:
1、导包
jackson-annotations-2.1.5.jar
jackson-core-2.1.5.jar
jackson-databind-2.1.5.jar
AjaxTestController.java
/**
* 将返回的数据放在响应体中;
* 如果是对象,jackson包自动将对象转为json格式
* @return
*/
@ResponseBody
@RequestMapping("/getallajax")
public Collection<Employee> ajaxGetAll(){
Collection<Employee> all = employeeDao.getAll();
return all;
}
Employee.java:
@JsonFormat(pattern="yyyy-MM-dd")
private Date birth = new Date();
jackson可以自己规定前端返回格式
ajax-获取索引员工
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<%
pageContext.setAttribute("ctp", request.getContextPath());
%>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<%=new Date() %>
<a href="${ctp }/getallajax">ajax获取所有员工</a><br/>
<div>
</div>
<script type="text/javascript">
$("a:first").click(function(){
//1、发送ajax获取所有员工上
$.ajax({
url:"${ctp}/getallajax",
type:"GET",
success:function(data){
//console.log(data);
$.each(data,function(){
var empInfo = this.lastName+"-->"+this.birth+"--->"+this.gender;
$("div").append(empInfo+"<br/>");
});
}
});
return false;
});
</script>
</body>
</html>
效果:image.png
点击链接,便会返回员工信息
requestBody获取请求体
AjaxTestController.java
/**
* @RequestBody:请求体;获取一个请求的请求体
* @RequestParam:
*
* @ResponseBody:可以把对象转为json数据,返回给浏览器
*
* @RequestBody:接受json数据,封装为对象
* @return
*/
@RequestMapping("/testRequestBody")
public String testRequestBody(@RequestBody String body){
System.out.println("请求体:"+body);
return "success";
}
testOther.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<%
pageContext.setAttribute("ctp", request.getContextPath());
%>
</head>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<form action="${ctp }/testRequestBody" method="post"
enctype="multipart/form-data">
<input name="username" value="tomcat" /> <input name="password"
value="123456"> <input type="file" name="file" /> <input
type="submit" />
</form>
</body>
</html>
要获得请求体不能是get请求方式。
发送json数据给服务器
AjaxTestController.java
/**
* @RequestBody:请求体;获取一个请求的请求体
* @RequestParam:
*
* @ResponseBody:可以把对象转为json数据,返回给浏览器
*
* @RequestBody:接受json数据,封装为对象
* @return
*/
@RequestMapping("/testRequestBody")
public String testRequestBody(@RequestBody Employee employee){
System.out.println("请求体:"+employee);
return "success";
}
testOther.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<%
pageContext.setAttribute("ctp", request.getContextPath());
%>
</head>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<a href="${ctp }/testRequestBody">ajax发送json数据</a>
</body>
<script type="text/javascript">
$("a:first").click(function() {
//点击发送ajax请求,请求带的数据是json
var emp = {
lastName : "张三",
email : "aaa@aa.com",
gender : 0
};
//alert(typeof emp);
//js对象
var empStr = JSON.stringify(emp);
//alert(typeof empStr);
$.ajax({
url : '${ctp}/testRequestBody',
type : "POST",
data : empStr,
contentType : "application/json",
success : function(data) {
alert(data);
}
});
return false;
});
</script>
</html>
效果:image.png
点击后,将jsp文件里写的json传给后端的javabean对象。
SpringMVC-HttpEntity可以获取请求头(了解)
AjaxTestController.java:
/**
* 如果参数位置写HttpEntity<String> str;
* 比@RequestBody更强,可以拿到请求头;
* @RequestHeader("")
*
* @param str
* @return
*/
@RequestMapping("/test02")
public String test02(HttpEntity<String> str){
System.out.println(str);
return "success";
}
testOther.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<%
pageContext.setAttribute("ctp", request.getContextPath());
%>
</head>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<form action="${ctp }/test02" method="post"
enctype="multipart/form-data">
<input name="username" value="tomcat" /> <input name="password"
value="123456"> <input type="file" name="file" /> <input
type="submit" />
</form>
</body>
</html>
ResponseEntity既能返回响应数据还能定制响应头
AjaxTestController.java
/**
* 将返回数据放在响应体中
*
* ResponseEntity<String>:响应体中内容的类型
* @return
*/
@RequestMapping("/haha")
public ResponseEntity<String> hahah(){
MultiValueMap<String, String> headers = new HttpHeaders();
String body = "<h1>success</h1>";
headers.add("Set-Cookie", "username=hahahaha");
return new ResponseEntity<String>(body , headers, HttpStatus.OK);
}