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！！！【最关键的地方】