使用JQuery將前端form表單數據轉換爲JSON字符串傳遞到後臺處理

通常地，咱們在處理表單（form表單哦）數據時，傳輸對象或字符串到後臺，Spring MVC或SpringBoot的Controller接收時使用一個對象做爲參數就能夠被正常接收並封裝到對象中。這種方式前端處理表單數據時能夠這樣處理：

$('#form').serialize()
//或者
$('#form').serializeArray()

這種方式傳輸的數據格式能夠在F12中看到是這樣的：

使用AJAX發送到後臺後，後臺使用一個對象做爲Controller層內某個方法的參數便可完成自動封裝。

可是，我如今後臺的需求是須要接收一個string類型的參數，而後本身寫方法（利用反射機制）封裝對象。就像下面這樣：

    @RequestMapping("/home/{service}/{method}")
    public ResponseMessageBase home(@PathVariable(value = "service") String serviceName,
            @PathVariable(value = "method") String methodName, @RequestBody String json, HttpServletRequest request) {
        return MsgProcessor.process(serviceName, methodName, json, request.getSession());
    }

這時就須要傳遞一個JSON格式的字符串，好比：

這時候，前端的處理方式以下，注意：contentType是必須的：

            var fields = $('#ff').serializeArray();
            var obj = {}; //聲明一個對象
            $.each(fields, function(index, field) {
                obj[field.name] = field.value; //經過變量，將屬性值，屬性一塊兒放到對象中
            })
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/home/testService/test",
                    async: true,
                    contentType: 'application/json',
                    dataType: 'JSON',
//                  data:$('#ff').serialize(),//這兩種方式都不能直接將表單數據轉換爲json格式
//                  data:$('#ff').serializeArray(),
                    data: JSON.stringify(obj),//將對象轉爲json字符串
                    success: function(obj) {
                        
                    }
                });

這樣，經過F12能夠看到傳遞的就是json字符串：

 

參考：

serializeArray()與serialize()的區別

jQuery Ajax中參數data傳入string類型，請求數據多一個冒號的分析

serializeArray()獲取的表單參數轉化成json格式的對象

AJAX的serializeArray()方法將表單元素以JSON字符串格式出入後臺

jQuery中serializeArray方法的使用及對象與字符串的轉換