SpringMVC的Ajax请求实现前后端分离
程序员文章站
2024-03-21 20:59:28
...
前后端分离实现
1.实现ajax查询所有数据返回前端
后端页面
/**
* 将返回的数据放在响应体中；
* 如果是对象，jackson包自动将对象转为json格式
* @return
*/
@ResponseBody
@RequestMapping("/ajax")
public List<product> ajaxQuery(){
List<product> query = productDAO.getQuery();
return query;
}前端页面
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
</head>
<body>
<%
pageContext.setAttribute("ctp", request.getContextPath());
%>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<%=new Date() %>
<a href="${ctp}/ajax" id="ajax">ajax获取所有员工</a><br/>
<div></div>
<%--ajax查询数据--%>
<script type="text/javascript">
$("#ajax").click(function(){
//1、发送ajax获取所有员工上
$.ajax({
url:"${ctp}/ajax",
type:"GET",
success:function(data){
$("div").empty();
$.each(data,function(){
var empInfo = this.name+"-->"+this.price+"--->"+this.cid+"--->"+this.date;
$("div").append(empInfo+"<br/>");
});
}
});
return false;
});
</script>
</body>
</html>2.通过ajax+json前端数据传到后端
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
</head>
<body>
<%
pageContext.setAttribute("ctp", request.getContextPath());
%>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<body>
<%=new Date() %>
<form action="${ctp}/test" method="post" enctype="multipart/form-data">
<input name="name" value="tomcat" id="name"/>
<input name="price" value="123456" id="price"/>
<input type="file" name="file" id="file"/>
<input type="submit" />
</form
<%--ajax查询数据--%>
<script type="text/javascript">
$("#ajax").click(function(){
//1、发送ajax获取所有员工上
$.ajax({
url:"${ctp}/ajax",
type:"GET",
success:function(data){
$("div").empty();
$.each(data,function(){
var empInfo = this.name+"-->"+this.price+"--->"+this.cid+"--->"+this.date;
$("div").append(empInfo+"<br/>");
});
}
});
return false;
});
</script>
<%--前后端分离--%>
<%--ajax后端发送数据--%>
<script type="text/javascript">
$("a:last").click(function() {
//点击发送ajax请求，请求带的数据是json
var emp = {
name : "sdsd",
price : 1,
cid : 2
};
// alert(typeof emp);
// JSON.parse() 把JSON字符串解析为JSON对象
//JSON.stringify() 用于把JSON对象序列化为JSON字符串。
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>
</body>
</html>后端页面
/**
* json+ajax前后端分离
* 获取前端数据
*/
@RequestMapping(value = "/testRequestBody",method = RequestMethod.POST)
public String json(@RequestBody product product){
System.out.println("请求体："+product);
return "suc";
}
3.其他用法
/**
* 将返回数据放在响应体中
* ResponseEntity<String>：响应体中内容的类型
* @return
*/
@RequestMapping("/test04")
public ResponseEntity<String> test04(){
// 创建一个头
MultiValueMap<String, String> headers = new HttpHeaders();
// 实现body的html
String body = "<h1>哈哈哈</h1>";
// 传入一个Cookie
headers.add("Set-Cookie", "username=hahahaha");
// 设置编码格式
headers.set("Content-Type","text/html;charset=UTF-8");
// 返回到页面
return new ResponseEntity<String>(body , headers, HttpStatus.OK);
}
/**
如果参数位置写HttpEntity<String> str;
* 比@RequestBody更强，可以拿到请求头；
* @RequestHeader("")
* @param
* @return
*/
// @ResponseBody
@RequestMapping("/test03")
public String test03(HttpEntity<String> str){
System.out.println(str);
System.out.println(str.getHeaders().get("host"));
System.out.println(str.getHeaders().get("cache-control"));
return "suc";
}
/**
* ResponseBody也可以直接传参数
* @return
*/
@ResponseBody
@RequestMapping(value = "/test02", produces = "text/html;charset=UTF-8")
public String test02(){
return "<h1>哈哈哈<h1>";
}
/**
* @RequestBody:请求体；获取一个请求的请求体
* @RequestParam:
*
* @ResponseBody：可以把对象转为json数据，返回给浏览器
*
* @RequestBody：接受json数据，封装为对象
* @return
*/
@RequestMapping(value = "/test",method = RequestMethod.POST)
public String testRequestBody(@RequestBody String product){
System.out.println("请求体1："+product);
return "suc";
}