使用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方法的使用及對象與字符串的轉換