SpringBoot 与 ajax

不同的传递方式(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<String> 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<String> 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 中。