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 中。