Ajax傳遞各種數據類型（解決你傳數組的頭疼問題）

1.使用json數據格式

• 傳遞數組

<button id="btn">點擊</button>
    <script type="application/javascript">
        $(function () {
            $("#btn").on("click",function (){
           
                var nums=[1,2,3,4];
                $.ajax({
                    type:"post",
                    url: "/test",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(nums),
                    success: function (result) {
                        alert(1)
                    }
                });
            });
        })
    </script>

   @RequestMapping("/test")
    @ResponseBody
    public void  test(
            @RequestBody Integer [] nums
    ){

        for (int i=0;i<nums.length;i++){
            System.out.println("第"+i+"個值爲:"+nums[i]);
        }
    }

• 傳遞集合

<button id="btn">點擊</button>
    <script type="application/javascript">
        $(function () {
            $("#btn").on("click",function (){
                var data = [{
                    username:"zhangsan",
                    password:"123"
                },{
                    username:"lisi",
                    password:"123"
                }];

                $.ajax({
                    type:"post",
                    url: "/test",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    success: function (result) {
                        alert(1)
                    }
                });
            });
        })
    </script>

   @RequestMapping("/test")
    @ResponseBody
    public void  test(
            @RequestBody List<UserEntity> users
    ){
        users.forEach(user -> {
            System.out.println(user.toString());
        });
  }

• 傳遞對象（同上）

2.不使用json格式

• 傳遞數組

   @RequestMapping("/test")
    @ResponseBody
    public void  test(
            @RequestParam(value = "nums") Integer nums[]
    ){
        for (int i=0;i<nums.length;i++){
            System.out.println("第"+i+"個值爲:"+nums[i]);
        }
    }

<button id="btn">點擊</button>
    <script type="application/javascript">
        $(function () {
            $("#btn").on("click",function (){
                var data = [{
                    username:"zhangsan",
                    password:"123"
                },{
                    username:"lisi",
                    password:"123"
                }];
                var nums=[1,2,3,4];
                $.ajax({
                    type:"get",
                    url: "/test",
                    traditional:true, //默認false
                    data: {
                        nums:nums
                    },
                    success: function (result) {
                        alert(1)
                    }
                });
            });
        })
    </script>

traditional:是否使用傳統的方式淺層序列化。 通過ajax提交數組時，會自動在所設定的參數後面增加中括號：“[]”， 導致後端spring MVC中的@RequestParam獲取不到參數。解決方法： ajax請求時增加：traditional: true 就可以正常提交了。原因如下： jQuery會調用jQuery.param序列化參數，jQuery.param( obj, traditional ) ，默認的話，traditional爲false，即jquery會深度序列化參數對象， 以適應如PHP和Ruby on Rails框架，但servelt api無法處理， 我們可以通過設置traditional 爲true阻止深度序列化。

 

如果你不設置淺層序列化，對數組對象 應該這樣設置

var arr={params:['param','param2']};
$.ajax({url:請求地址,
            data:arr,
            type:"POST",
            success:function(){
                //do something
            }
        });