Spring MVC结合jQuery实现跨域请求

最新推荐文章于 2023-07-20 00:25:03 发布

fullStackChenZF

最新推荐文章于 2023-07-20 00:25:03 发布

阅读量524

点赞数

本文链接：https://blog.csdn.net/fullStackChenZF/article/details/74516318

版权

一、加载依赖

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8</version>
</dependency>

jackson在Spring MVC中可以把Map、List、Set、Array等数据自动转化为JSON。

二、编写客户端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Ajax+JSON从服务端获取数据</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Ajax+JSON从服务端获取数据</h1>
<table id="table" border="1">
<tr>
<td>ID</td>
</tr>
</table>
<button id="btn">Ajax</button>
<script>
$(function(){
$("#btn").click(function(){
$.ajax({
type:"get",
url:"http://localhost:8080/17SpringMVCajax/ajax.do",
async:true,
success:function(data){
alert(data.length);
$.each(data,function(index,dom){
var tr=$("<tr><td>"+dom['id']+"</td></tr>");
$("#table").append(tr);

});
},
error:function(){
alert("error");
}
});

});

});

</script>
</body>
</html>

客户端访问地址是：

http://127.0.0.1:8020/StuMS/index3.html

三、在Spring MVC 配置文件中添加如下配置：

<mvc:annotation-driven></mvc:annotation-driven>

四、Spring MVC的控制层的代码编写

package cn.com.bochy.springmvc.controller;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.com.bochy.springmvc.entity.Stu;
@Controller
public class AjaxController {
@RequestMapping("/ajax")
@ResponseBody
public List<Stu> getAjax(HttpServletResponse response){
//关键代码：实现跨域
response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
List<Stu> lis=new ArrayList<Stu>();
Stu s1=new Stu();
s1.setId(1);
Stu s2=new Stu();
s2.setId(2);
Stu s3=new Stu();
s3.setId(3);
Stu s4=new Stu();
s4.setId(4);
Stu s5=new Stu();
s5.setId(5);
lis.add(s1);
lis.add(s2);
lis.add(s3);
lis.add(s4);
lis.add(s5);
return lis;
}
}

服务端的访问地址是：

http://localhost:8080/17SpringMVCajax/ajax.do

五、总结

本章内容，主要讲解了通过设置请求响应的头部信息 response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");实现从Spring MVC的控制层跨域获取数据，数据的类型是List.@responsebody表示该方法的返回结果直接写入HTTP response body中一般在异步获取数据时使用。