前端与spring交互数据的处理和接收基础方式

1.Query Params传参方式

query params就是最简单的问号传参方式,而spring接受参数方式有以下几种不需要额外第三方包。

  • 支持类型: url
  • 支持请求类型: get
  • 支持的Content-Type: all
  • 请求示例:/test/get?id=12345
@RestController
@RequestMapping("/test")
public class TestController {
    private static Logger log = LogManager.getLogger(TestController.class);

    @RequestMapping(value = "/get", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public ResultVO getInfo(String id, @RequestParam("id") String tid, HttpServletRequest request) {


        String rid = request.getParameter("id");

        log.info("String id:"+id+";@RequestParam(\"id\"):"+tid+";request.getParameter:"+rid);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }
}
/* PS:
new ResultVO(ResultStatusCode.SUCCESS)是自己封装的JSON对象和枚举,就不展示了。
Controller使用了@RestController这个是只返回json数据不能跳转页面,
@Controller是能跳转页面默认不返回json,需要在对应的方法加上@ResponseBody注解。
@RequestMapping 同时支持get和post,没做区分。
区分的话自主控制@RequestMapping (value =  "/get" , method = {RequestMethod. POST ,RequestMethod. GET })
*/

前端传参:


image.png

后台接收:


image.png

2.占位符传参方式

统一资源定位符(又称URL)是一种资源命名或定位格式,用于指定或寻址资源。 URL在Web上非常流行,在Web上使用URL格式寻址或标识网站和Web资源。
2000年Roy Fielding博士在其博士论文中提出REST(Representational State Transfer)风格的软件架构模式后,REST就基本上迅速取代了复杂而笨重的SOAP,成为Web API的标准了。
RESTful作为目前最流行的 API 设计规范,一定有着它独有的魅力:强大、简介、易上手。

  • 支持类型: url
  • 支持请求类型: get
  • 支持的Content-Type: all
  • 请求示例:/test/get/{id}
    @RequestMapping(value = "/get/{id}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public ResultVO getInfoPath(@PathVariable("id") String id) {

        log.info("String id:"+id);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

/*
PS:这种RESful的API设计规范确实有它的独到之处,作为互联网展示信息来说它是非常简介好用的。
但是如果对企业应用的增删改来说,它的安全性不友好了。
如:post提交修改信息时修改地址栏占位符修改了其他数据的信息,/update/user/0001,body中包含要修改的用户数据,地址栏直接改为/update/user/0002是不是也把0002用户的信息也修改了呢?
如果修改密码重置密码也使用RESful占位符的设计,那只要登录的用户就可以把其他用户密码给修改或重置了。这里假设的是稍微有点网络知识的人,要说懂开发会debug的,抓包的,还会http测试软件和发包的人
让他来搞破坏找漏洞还是很容易的。
*/

前端传参:


image.png

后台接收:


image.png

3.表单提交

以前的form表单和formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化。
而x-www.form-urlencoded是post默认数据传输格式,跟Query Params传参方式一样。

  • 支持类型: Body
  • 支持请求类型: Post/Put/Delete/Patch
  • 支持的Content-Type: form-data,x-www.form-urlencoded
  • 请求示例: 好几种
    @RequestMapping(value = "/add", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO add(String name, @RequestParam("name") String rpname,String age, @RequestParam("age") String rpage, HttpServletRequest request) {

        String rname = request.getParameter("name");
        String rage = request.getParameter("age");

        log.info("String name:" + name + ";@RequestParam(\"name\"):" + rpname + ";request.getParameter:" + rname);
        log.info("String age:" + age + ";@RequestParam(\"age\"):" + rpage + ";request.getParameter:" + rage);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }
//文件流和字段
    @RequestMapping(value = "/addFile", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO addUserFile(String name, @RequestParam("name") String rpname, String age, MultipartFile pic, @RequestParam("age") String rpage, HttpServletRequest request) {

        String rname = request.getParameter("name");
        String rage = request.getParameter("age");
        log.info("pic:"+pic.getSize());
        log.info("String name:" + name + ";@RequestParam(\"name\"):" + rpname + ";request.getParameter:" + rname);
        log.info("String age:" + age + ";@RequestParam(\"age\"):" + rpage + ";request.getParameter:" + rage);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

    @RequestMapping(value = "/addUser", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO addUser(User user,HttpServletRequest request) {
        log.info("String user:" + user.toString());

        return new ResultVO(ResultStatusCode.SUCCESS);
    }
//PS:对象接收时,变量名不影响接收,不需要user.name,不要加@RequestBody,form表单不是json对象。

1.参数值接收:

前端传参:


image.png

后端接收:


image.png

2.对象接收:

前端传参:


image.png

后端接收:


image.png
image.png

3.文件流和参数对象接收:

前端传参:


image.png

后端接收:


image.png

前端传参:


image.png

后端接收:
image.png

image.png

4.json对象接收!!!!注意这个是json对象,不是json字符串

ajax/axios传输json对象,适用于GET和POST请求,且此时contentType必须为application/x-www-form-urlencoded; charset=UTF-8,ajax会自动将json对象转化为&连接的key=value格式的数据。axios需要指定传参params,而GET请求就跟Query Params传参方式一样的,POST请求就放入post请求体中。

  • 支持类型: Body
  • 支持请求类型: Get/Post/Put/Delete/Patch
  • 支持的Content-Type: application/x-www-form-urlencoded; charset=UTF-8
  • 请求示例: 好几种
    @RequestMapping(value = "/addUser", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO addUser(User user, HttpServletRequest request) {
        log.info("String user:" + user.toString());

        return new ResultVO(ResultStatusCode.SUCCESS);
    }


    @RequestMapping(value = "/addJSONObj", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    @ResponseBody
    public ResultVO addJSON(String name, @RequestParam("name") String rpname, String age, @RequestParam("age") String rpage, HttpServletRequest request) {

        String rname = request.getParameter("name");
        String rage = request.getParameter("age");
        log.info("String name:" + name + ";@RequestParam(\"name\"):" + rpname + ";request.getParameter:" + rname);
        log.info("String age:" + age + ";@RequestParam(\"age\"):" + rpage + ";request.getParameter:" + rage);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

前端传参:

image.png

image.png

image.png

后台接收:这里要注意了,传json对象后台是对嵌套json对象不友好,要是有嵌套得自己处理很麻烦,所以传输json对象一般是简单json对象
image.png

5.json字符串接收!!!!注意这个是json字符串,不是json对象别弄混了,前端要把对象转字符串的。

      ajax/axios传输json字符串,是前端js把json对象字符串序列化到内存然后以http协议通过网络传输到后台,而spring使用网络套接字把传过来的序列化的json对象进行反序列化转换为java对象使用注解@RequestBoydy。而以前使用java原生HttpServlet 需要通过request.getInputStream()获取数据然后使用JSONObject来反序列化。

ajax需要自己转字符串,asios使用data传参会默认给转成json字符串

Servlet的框架是由两个Java包组成:javax.servlet和javax.servlet.http。 在javax.servlet包中定义了所有的Servlet类都必须实现或扩展的的通用接口和类,在javax.servlet.http包中定义了采用HTTP[通信协议]的HttpServlet类。spring也是基于Servlet的框架的

什么是序列化和反序列化
对象的序列化就是把对象转化成字节序列进行发送、存储,反序列化在接收和读取的时候把字节序列转化成对象。

  • 支持类型: Body
  • 支持请求类型: Post/Put/Delete/Patch
  • 支持的Content-Type: application/json; charset=UTF-8
  • 请求示例: 好几种
    @RequestMapping(value = "/addJSONStr", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    @ResponseBody
    public ResultVO addJSONStr(@RequestBody User user, HttpServletRequest request) {

        log.info("String user:" + user.toString());

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

前端传参:


image.png
image.png

后台接收:这是json字符串用对象接收,也可以使用Map等。springboot项目添加spring-boot-starter-web依赖,默认提供了Jackson用于解析json,da大部分人使用om.alibaba.fastjson

通过关键字段@RequestBody,标明这个对象接收json字符串,然后自己使用Gson、fastjson等自己解析转对象

image.png

通过@RequestBody注解对象接收,则需要添加一些json解析器,Spring Boot做了自动化配置,只需要添加jackson、gson、fastjson依赖就起作用,但是如果对时间转换则需要自己写个Bean。转载至:springboot中的json、gson、fastjson如何使用与日期格式转换

image.png

image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,783评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,396评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,834评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,036评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,035评论 5 362
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,242评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,727评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,376评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,508评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,415评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,463评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,140评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,734评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,809评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,028评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,521评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,119评论 2 341

推荐阅读更多精彩内容