SpringMVC与Jquery使用的一些方方面面,

本文最后更新于:9 天前

前言

说起前后台交互,同步,异步,Ajax一套一套的,自己一操作就错,可谓是人间真实。于是乎写个博客记录一下,加深印象。目前前后端分离是主流,JavaScript的日益繁荣,一些后端模板引擎其实没多大用处,就算前后端不分离,我们依然可以用全异步进行交互,后台只用来拦截路由以及输出页面,页面中的数据可以全部通过Ajax来获取。这种方式是主流的,JS的性能以及语法在处理页面中不输后端语言了。至于前后端完全分离,也不是不行,看项目,看钱呗只要你JS玩的六,前后端分不分离,不重要,你可以做到视图和数据分离。归功与Ajax十分好用,也归功于js引擎性能的提升(除了IE6,7)这种非人使用的浏览器。

碎碎念

先从前台说起吧,前台发送Ajax请求,这里就使用Jquery封装的Ajax来操作。

首先,我们知道,前后台数据交互的数据格式。常用的只有三种,表单数据,JSON数据,文件数据。SpringMVC接收这三种数据的方式也是不同的,说起不同,其实也就是方法形参不同,亦或加一个注解的事。

使用Jquery封装的Ajax发送数据

不是百分百原创,我也不盈利,我也是看了好多博客一点一点(博客鬼裁)总结出来的,有些内容我是凭印象写的,但大部分我是实践过的,网上资源多是多,但难找啊,好不容易找到了,又是一些很旧的的版本的了,我是学习的,框架,依赖,我下意识的用的都是最新的,就算不是最新的,也会是非常稳定的。

baba完了,进入正文。

$.ajax()

该方法用于执行Ajax请求,常用于其他jQuery Ajax方法不能完成的请求,也许我们可以把它称为”jQuery中Ajax系列方法之母”。

形式:$.ajax({name:val, name:val,...});

可选字段:

  • url:链接地址,字符串表示
  • data:需发送到服务器的数据,GETPOSTput,delete都可以,格式为{A: ‘…’, B: ‘…’},在contentType为”application/json”时data必须要为JSON数据,这时我们要使用JSON.stringify({A: ‘…’,B: ‘…’})来把普通对象转为JSON格式的数据。
  • type:”POST“,”GET“,”PUT“,”DELETE“,请求类型不分大小写
  • timeout: 请求超时时间,单位为毫秒,数值表示
  • cache:是否缓存请求结果,bool表示
  • contentType:内容类型,默认为”application/x-www-form-urlencoded”,需要发送JSON数据时则为”application/json”, 在发送文件数据时,要设为false布尔类型,无需设置请求头
  • processData: 是否将将数据序列化,除了在发送文件时需要设为false,其他情况不需要设置此属性。
  • dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json,除特殊情况,一般无需设置。
  • success:请求成功后,服务器回调的函数,
  • error:请求失败后,服务器回调的函数
  • complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用
  • async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行

举个栗子:

1
2
3
4
5
6
7
8
9
$.ajax({
url: "/greet",
data: JSON.stringify({name: 'jenny'}),
type: "POST",
contentType: 'application/json'
success: function(data) {
// data就是mvc回传给前台的数据。是个JS对象。
}
});

$.post()

该方法使用POST方式执行Ajax请求,从服务器加载数据。

形式:$.post(url, data, func, dataType);
可选参数:

  • url:链接地址,字符串表示
  • data:需要发送到服务器的数据,格式为{A: '...', B: '...'}
  • func:请求成功后,服务器回调的函数;function(data, status, xhr),其中data为服务器回传的数据,status为响应状态,xhr为XMLHttpRequest对象,个人感觉关注data参数即可
  • dataType:服务器返回数据的格式

举个栗子

1
2
3
4
5
6
7
8
$.post(
"/greet",
{name: 'Brad'},
function(data) {
...
},
"json"
);

$.get()

该方法使用GET方式执行Ajax请求,从服务器加载数据。

形式:$.get(url, data, func, dataType);
其各个参数所示意义与$.post()一致,在此不再列出,唯一区别就是请求类型是GET。

举个栗子

1
2
3
4
5
6
7
8
$.get(
"/greet",
{name: 'Brad'},
function(data) {
...
},
"json"
);

$.getJSON()

该方法使用GET方式执行Ajax请求,从服务器加载JSON格式数据。

形式:$.getJSON(url, data, func);

因为确定服务器返回json编码的数据,故相较于$.get()不必再指定dataType

举个栗子

1
2
3
4
5
6
7
$.getJSON(
"/greet",
{name: 'jenny'},
function(data) {
...
}
);

上面就是几种常见的,除了文件上传和发送JSON数据时注意一下,其他的不需要过多的配置

使用SpringMVC接收数据

为了方便,这里我是用springboot来构建一个服务端,用来演示springMVC接收数据。

说的再多,不如上代码。代码里面有注释。

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@RestController
public class TestController {


/**
* 这是普通的获取url中的数据,
* 如请求为
* user/1
* user/2
* user/3
* 等等,都会进入这个方法,方法参数就是user/后面的值。
* ps这种方法据说性能很差,所以一般不建议这么搞
*/
@RequestMapping("/user/{id}")
public Map<String,Object> get1(@PathVariable String id){
return null;
}

/**
* 这一般用来获取普通的表单数据,这是基本类型
* 前台发送的Ajax
* $.ajax({
* url: "/user",
* data: {id: '231},
* type: "get",
* success: function(data) {
* // data就是mvc回传给前台的数据。是个JS对象。
* }
* });
*
*/
@RequestMapping("/user")
public Map<String, Object> get2(String id){
// 这个id就是获取请求中的id的值
return null;
}

/**
* 上面时基本类型,有时我们需要接收的一个对象类型的数据,也就是引用类型。
* SpringMVC也很方便
* $.ajax({
* url: "/user",
* data: {id: '231',name:'小王',age: 23},
* type: "get",
* success: function(data) {
* // data就是mvc回传给前台的数据。是个JS对象。
* }
* });
* 只要引用类型的属性名和前台传送的键对应上,就能进行封装,这是表单数据。
*/
@RequestMapping("/user")
public Map<String, Object> get3(User user){
return null;
}

/**
* 如何接收JSON数据,
* $.ajax({
* url: "/greet",
* data: JSON.stringify({id: '231',name:'小王',age: 23}),
* type: "POST",
* contentType: 'application/json'
* success: function(data) {
* // data就是mvc回传给前台的数据。是个JS对象。
* }
* });
*
* 这个Ajax发送的就是JSON数据,和上面的data:{}不一样,
* springMVC接收JSON数据,需要在参数上加一个@RequestBody注解即可,封装逻辑也是属性名对应JSON的键名。
* 这里我多说两句,建议集合类型,以及复杂的对象,什么叫复杂的对象呢,属性名超过3个以上的JSON对象,在前后台交互时都采用JSON格式。
* 性能好,还稳定
*
*/
@RequestMapping("/user")
public Map<String,Object> get4(@RequestBody User user){
return null;
}

/**
* 文件上传就用这个方法参数接收,文件上传,我在写一篇博客,都不一定说的完。
*/
@RequestMapping("/user")
public Map<String,Object> get5(MultipartFile multipartFile){
return null;
}
}
// 这里使用了Lombok,害虽说意识中不想使用这东西,但是,咋说呢,香呗,希望JDK早点更新自带这玩意就好了。不过目前来看,只是时间问题而已。
@Data
class User{
private Integer id;
private String name;
private Integer age;
}

好了,也写完了,风格慢慢形成,废话还是一点一点在变多啊。

世人皆论你风趣幽默 却未曾见你手捧星辰对我说我们互相拯救。

网抑时刻

封面原图

想在博客里面整些不一样的,但再想想,没有必要,花里胡哨没啥用,酒好也怕巷子深,我这酒也不咋滴啊,不怕。

侠客


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!