SpringMVC与Jquery使用的一些方方面面,
本文最后更新于:2 个月前
前言
说起前后台交互,同步,异步,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:需发送到服务器的数据,
GET
,POST
,put
,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 |
|
$.post()
该方法使用POST方式执行Ajax请求,从服务器加载数据。
形式:$.post(url, data, func, dataType)
;
可选参数:
- url:链接地址,字符串表示
- data:需要发送到服务器的数据,格式为{
A: '...', B: '...'}
- func:请求成功后,服务器回调的函数;
function(data, status, xhr)
,其中data为服务器回传的数据,status为响应状态,xhr为XMLHttpRequest对象,个人感觉关注data参数即可 - dataType:服务器返回数据的格式
举个栗子
1 |
|
$.get()
该方法使用GET方式执行Ajax请求,从服务器加载数据。
形式:$.get(url, data, func, dataType)
;
其各个参数所示意义与$.post()
一致,在此不再列出,唯一区别就是请求类型是GET。
举个栗子
1 |
|
$.getJSON()
该方法使用GET方式执行Ajax请求,从服务器加载JSON格式数据。
形式:$.getJSON(url, data, func)
;
因为确定服务器返回json编码的数据,故相较于$.get()
不必再指定dataType
。
举个栗子
1 |
|
上面就是几种常见的,除了文件上传和发送JSON数据时注意一下,其他的不需要过多的配置
使用SpringMVC接收数据
为了方便,这里我是用springboot来构建一个服务端,用来演示springMVC接收数据。
说的再多,不如上代码。代码里面有注释。
1 |
|
好了,也写完了,风格慢慢形成,废话还是一点一点在变多啊。
世人皆论你风趣幽默 却未曾见你手捧星辰对我说我们互相拯救。
网抑时刻
封面原图
想在博客里面整些不一样的,但再想想,没有必要,花里胡哨没啥用,酒好也怕巷子深,我这酒也不咋滴啊,不怕。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!