springmvc与ajax的使用,SpringMVC对Ajax异步请求的支持

Ajax 异步请求概念

AJAX: Ansyc Javascript And Xml (异步请求).

异步是指基于 Ajax 的应用与服务器通信的方法。对于传统的 Web 应用，每次用户发送请求或向服务器请求获得新数据时，浏览器都会完全丢弃当前页面，而等待重新加载的页面。在服务器完全响应之前，用户浏览器将是一片空白，用户的动作必须中断。异步是指用户发送请求后，完全无须等待，请求在后台发送，不会阻塞用户的当前活动，用户无须等待第一次请求得到完全响应，就可以立即发送第二次请求。简单的说,异步请求不会刷新当前 html 页面。

异步指的是服务器端响应数据的获取方式。

同步：

异步：

异步&同步的区别

1.同步请求：

请求的过程：浏览器 (当前的 html 页面会丢弃) —> http 协议 —> Web 服务器 (tomcat)

响应的过程：Web 服务器 (tomcat) —> http 协议 –> 返回一个新 html 页面.

2.异步请求：

请求的过程：浏览器 (当前的 html 页面不会丢弃) —> Ajax 引擎 (http 协议) —> Web 服务器 (tomcat)

响应的过程：Web 服务器 (tomcat) —> 准备部分数据 –> Ajax 引擎 (http 协议) –> DOM 编程.

总而言之，异步请求只是局部刷新页面，同步请求会全部刷新当前的页面

jQuery 框架的异步请求和处理

1.$.ajax([settings])—jQuery 核心处理异步请求的方法：

语法：

$.ajax([settings])

最简单的情况下，$.ajax() 可以不带任何参数直接使用。具体语法格式都有哪些参数请参照：https://www.w3school.com.cn/jquery/ajax_ajax.asp

2.$.post()

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(url, data, function(data, status){

// status(状态码): success 、error

// data : 响应数据

}, dataType);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 function 参数是请求成功后所执行的函数名,其中 data 是响应的数据，status 是状态码

可选的 dataType 参数是服务器响应返回的数据

3.$.get()

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(url, data, function(data, status){

// status(状态码): success 、error

// data : 响应数据

}, dataType);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 function 参数是请求成功后所执行的函数名,其中 data 是响应的数据，status 是状态码

可选的 dataType 参数是服务器响应返回的数据

springMVC 支持 ajax 异步请求和处理返回 json 数据

数据绑定@RequestBody/@ResponseBody

@RequestBody

功能 ：用于将 HttpServletRequest 的 getInputStream() 的内容绑定到方法入参

例如：

@RequestMapping(value = “/hello”)

public String handleRequest(@RequestBody String body){

//body 参数就被请求参数自动绑定

}

@ResponseBody

功能：被 ResponseBody 修饰的方法的返回值会被作为响应体

使用@RequestBody/@ResponseBody 来支持 Ajax

可以使用@RequestBody来自动获取 Ajax 上传的数据，同时也可以使用@ResponseBody，把要返回的对象自动拼成 JSON 的格式返回。当然，需要加入几个 jackson 的包，这里加入了：

jackson-core-2.9.3.jar、jackson-annotations-2.9.3.jar、jackson-databind-2.9.3.jar，Maven 依赖如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

com.fasterxml.jackson.core

jackson-databind

2.9.3

com.fasterxml.jackson.core

jackson-core

2.9.3

com.fasterxml.jackson.core

jackson-annotations

2.9.3

Controller

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

/**

* ResponseBody:用于将ResponseBody方法的返回值作为响应体

* RequestBody:用于将HttpServletRequest的getInputStream()内容绑定到入参

*

* @param users

* @return

*/

@RequestMapping(value = "/getAllUserByAJAX", produces = "application/json;charset=UTF-8")

public List (@ModelAttribute("users") List users){

return users;

}

/**

* RequestBody：将请求体的数据绑定到入参

*

* @param user

* @return

*/

@ResponseBody

@RequestMapping("/testRequestBody")

public User testRequestBody(@RequestBody User user, Model model){

System.out.println("请求的数据："+user);

model.addAttribute("requestInfo", user);

return user;

}

/**

* 提前把全部信息查询好放在隐含模型中

* @param model

*/

@ModelAttribute("users")

public void getAll(Model model){

IUserService userService = new IUserServiceImpl();

List lists = userService.getUser(null, null, null);

model.addAttribute("users", lists);

}

1. 通过 AJAX 获得服务器数据的页面：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

pageContext.setAttribute("ctp", request.getContextPath());

%>

ajax

$().ready(function () {

$("#first").click(function () {

alert("adacd");

$.ajax({

url: "${ctp}/getAllUserByAJAX",

type: "GET",

success: function (data) {

//console.log(data)

$.each(data, function () {

var userInfo = this.name + "---" + this.age + "---" + this.email;

$("#user").append(userInfo + "
");

})

}

});

return false;

});

});

获取全部用户信息

测试结果

2. 通过 AJAX 向服务器发 JSON 数据，服务器返回 JSON 数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

pageContext.setAttribute("ctp", request.getContextPath());

%>

Title

$().ready(function () {

$("#first").click(function () {

//点击发送JSON数据给服务器

$.ajax({

url: "${ctp}/testRequestBody",

type: "POST",

contentType:"application/json", //请求的文本格式：json

data: JSON.stringify({name: $("#username").val(), age: $("#userage").val(), email: $("#userEmail").val()}), //给服务器提交的数据

dataType: "json", //服务器返回的数据类型

success: function (data) {

var userInfo = data.name + "---" + data.age + "---" + data.email;

$("#users").append(userInfo + "
");

}

});

return false;

});

});

AJAX发送JSON数据给服务器

测试结果