您的位置：首页 > Web前端 > JQuery

Spring MVC结合jQuery实现跨域请求

2017-07-06 08:41 483 查看

一、加载依赖

<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中一般在异步获取数据时使用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航