ajax傳遞數組信息，解決多選框多值提交問題

    在後端開發中如果要獲取到前臺多選框中內容傳統的方式是將多選框內容放在與一個表單中，之後將表單信息提交到後臺，後臺的控制層僅需通過參數名就能獲取到提交的信息。

 傳統方式

前臺：

  <h5>複選框內容測試</h5>
    <form action="user/mycontroller"
          method="post" method="post">
        <input type="checkbox" name="interest" value="a1" />a1<br />
        <input type="checkbox" name="interest" value="a2" />a2<br />
        <input type="checkbox" name="interest" value="a3" />a3<br />
        <input type="checkbox" name="interest" value="a4" />a4<br />
        <input type="checkbox" name="interest" value="a5" />a5<br />

        <input type="submit" />

    </form>

前臺效果：

後臺代碼

    @RequestMapping("/mycontroller")
    public String demo1(String [] interest){
        System.out.println("測試複選框內容信息，複選框內容信息通過String[]數組來進行接收");

        String hobbys = Arrays.toString(interest);
        System.out.println("興趣愛好：" + hobbys);

        return "success";
    }

    這樣在提交信息後SpringMVC會自動將信息進行封裝處理，這種基於form表單的形式，但是今天突然想到在實際業務開發中並不一定所有的信息複選內容都會保存在一個form表單中進行，比如下如圖所示：

 

    如果所示：在批量顯示數據時此時並不能將信息存放至form表單中，此時如果我想進行刪除數據信息並不能採用最開始的原始方法，就必須採用ajax技術，進行異步傳輸。

    

    具體思路：

        先利用就jquery來獲取到選中內容，將選中的值保存到一個數組中，之後將獲取到的信息傳遞到後臺，此時選擇框內容以數據形式保存，該如何通過ajax傳遞一個數組內容呢？

      此時我們傳遞的數據信息即：一個字段需要傳多個值，也即我們現在使用數組傳遞信息

     

$.ajax({
  type: "post",
  async: true,
  data: {
    "records": ["123","456","789"]
  },
  url: "xxxxx",
  error: function(request) {},
  success: function(data) {}
});

    但直接這樣傳遞，

         通過測試很快就會發現java後臺無法取到參數，因爲jQuery需要調用jQuery.param序列化參數，jQuery.param(obj, traditional )默認情況下traditional爲false，即jquery會深度序列化參數對象，以適應如PHP和Ruby on Rails框架，但servelt api無法處理，我們可以通過設置traditional 爲true阻止深度序列化。--------引用  _阡陌Mix 

    所以在設定ajax請求是必須設定traditional值爲true阻止深層序列化

 通過ajax傳遞數組信息

    前臺

<!-頁面信息---->
<button id="sub" >提交信息</button>
    <form action="/user/demo.do">
        <input type="checkbox" name="hobby" value="coding">coding
        <input type="checkbox" name="hobby" value="reading">reading
        <input type="checkbox" name="hobby" value="writing">writing
        <input type="checkbox" name="hobby" value="running">running
        <input type="submit" value="提交">
    </form>

腳本信息：

     

<script >
    var hobbys = [];//保存數據信息

    //對按鈕進行監聽
    $("#sub").click(function () {
        //獲取選中信息
        $("input[name='hobby']:checked").each(function (index) {
            hobbys[index] = $(this).val();
        });
        console.log(hobbys); //打印選中信息
        $.ajax({
        type:'post',
        data:{'ids':hobbys}, //提交數據
        dataType:'text',
        traditional:true,//是否淺層序列化  默認爲false 組織深層序列化才能保證後臺獲取到信息
        url:"user/demo",
        success:function (data) {
            console.log(data);
          }
        });
    });

</script>

後臺代碼

 @RequestMapping("/demo")
    public String fun(HttpServletRequest request){
        String [] rs = request.getParameterValues("ids"); //通過key獲取到信息
        if ( rs == null) {//避免報空指針而單獨處理
            System.out.println("結果集爲null");  
        }else{
            //打印結果集
            for( String s : rs){
                System.out.println(s);
            }
        }

        return "success";

    }

   總結：

      傳遞checkbox信息傳遞兩種方式

           方法一：通過form表單提交到後臺，後臺通過request提供APi獲取信息

           方法二：通過ajax異步請求發送頁面信息

    第二種主要步驟：

         1.獲取到複選框的選中信息內容   

         2. 通過ajax發送異步請求  此時數據屬於一鍵多值類型 【想清楚傳遞的數據類型一切問題就簡單了~~~】

         3.必須將ajax中的traditional:的屬性置爲true！！！【最關鍵的地方】