SpringBoot 与 ajax

阅读量：4972 次

发布时间：2019-06-12

本文共 5816 字，大约阅读时间需要 19 分钟。

不同的传递方式(POST & GET)会将传递的数据存储到不同的位置，而针对不同的存储位置而言后端读取的方式也是不一而同的。

我先说明一下问题场景：我在edit.HTML 界面中用自定义的脚本配合控件使用ajax函数进行提交数据

脚本长这样

/** * 保存 */function saveForm() {    console.log($("#fm").serialize());// 序列化    var data = {            'id' : $('input[name="id"]').val(),            'powerFreq' : $('input[name="powerFreq"]').val(),            'ratedVol' : $('input[name="ratedVol"]').val()    };    console.log(JSON.stringify(data));// json转化为字符串    $.ajax({        url : '/mes/ratedVolPowerFreq/save',        type : 'GET',/*POST*/        contentType : 'application/json',        dataType : 'json',        data : data,/*JSON.stringify(data),*/        success : function(result) {            if (!result.success) {                showAlertDlg('保存失败！' + result.message);                return;            }            layer.msg('保存成功！', {                icon : 1,                time : 1000            }, function() {                window.location.href = '/mes/ratedVolPowerFreq/list';            });        }    });}

当我们使用GET方法进行数据提交的话

Springboot controller层接收数据部分长这样

/**     * 保存功能     * @throws IOException     * @throws UnsupportedEncodingException     */    @RequestMapping(value = "/save")    @ResponseBody    public JsonResult
     
       Save(@RequestParam(value = "id") Integer id1,@RequestParam(value = "powerFreq") Double powerFreq,@RequestParam(value = "ratedVol") Double ratedVol){        System.out.println("+++++++++++++++++++++++++++++++++");        System.out.println(id1);        System.out.println(powerFreq);        System.out.println(ratedVol);        boolean test = true;        if (test) {            return new JsonResult<>(false,"傻逼 Σ(☉▽☉‘a");        }        System.out.println("+++++++++++++++++++++++++++++++++");    }

注意：这种ajax方法传递中数据部分可以使用Json数据、也可以使用序列化$("#fm").serialize()字符串但是！！！不能是JSON.stringify(data)不然回报Invalid character found in the request target.

但是！

我们使用使用ajax-POST方法进行数据提交的时候

就会一直报错：Required Integer parameter 'id' is not present

/** * 保存 */function saveForm() {    console.log($("#fm").serialize());    var data = {            'id' : $('input[name="id"]').val(),            'powerFreq' : $('input[name="powerFreq"]').val(),            'ratedVol' : $('input[name="ratedVol"]').val()    };    console.log(JSON.stringify(data));    $.ajax({        url : '/mes/ratedVolPowerFreq/save',        type : 'POST',        contentType : 'application/json',        dataType : 'json',        data : JSON.stringify(data),        success : function(result) {            if (!result.success) {                showAlertDlg('保存失败！' + result.message);                return;            }            layer.msg('保存成功！', {                icon : 1,                time : 1000            }, function() {                window.location.href = '/mes/ratedVolPowerFreq/list';            });        }    });}

SpringBoot - controller层

/**     * 保存功能     * @throws IOException     * @throws UnsupportedEncodingException     */    @RequestMapping(value = "/save")    @ResponseBody    public JsonResult
     
       Save(@RequestBody RatedVolPowerFreq curRVPF){        Integer id = curRVPF.getId();        if (id == null) {            curRVPF.setCreator(SessionUtils.getLoginUser());            curRVPF.setCreateTime(DateUtils.getCurDate());            curRVPF.setModifyTime(DateUtils.getCurDate());            ratedVolPowerFreqService.insert(curRVPF);        }else {            RatedVolPowerFreq temRVPF = ratedVolPowerFreqService.findById(id);            temRVPF.setRatedVol(curRVPF.getRatedVol());            temRVPF.setPowerFreq(curRVPF.getPowerFreq());            temRVPF.setModifyTime(DateUtils.getCurDate());            ratedVolPowerFreqService.update(temRVPF);        }        return new JsonResult<>(true,"保存成功！");    }

注意：这种ajax方法传递中数据部分禁止使用Json数据和序列化$("#fm").serialize()，回报：Unrecognized token 'id': was expecting ('true', 'false' or 'null')（无法识别“id”）的错误，

只能使用JSON.stringify(data)进行传递数据

关于http ajax操作的两种方法详解

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

Get和Post都是向服务器发送的一种请求，只是发送机制不同。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。

2. 首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。

3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

get请求和post请求在服务器端的区别:

4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源，资源的内容会被编入HTTP请示的内容中。例如，处理订货表单、在数据库中加入新数据行等。

当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对URL长度的限制。

若符合下列任一情况，则用POST方法：

* 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。

* 若使用GET方法，则表单上收集的数据可能让URL过长。

* 要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则用GET方法：

* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。

* 请求结果无持续性的副作用。

* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

对比

有关 GET 请求的其他一些注释：

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据

有关 POST 请求的其他一些注释：

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

下面的表格比较了两种 HTTP 方法：GET 和 POST。

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。