前台和后台互相传递数组

　　最近做项目要用到将多个字符串通过jq的ajax传递给后台的功能，刚开始是想将字符串以某个分隔符的形式拼接起来再进行传递，如：

$.ajax{
      url:"xxxx",
      data:{
            array: "Jason,Sean,Danny"
      }
}

　　然后后台获取参数后再分隔，这种做法有很不好，如果你需要的参数里面包含分隔符，那么通过分隔后获取到的数据便跟你想要的有出入了，此时最好的做法就是将其放入到一个数组里面再传递。即可将上述代码改为：

$.ajax{
      url:"xxxx",
      data:{
            array: ["Jason","Sean","Danny"]
      }
}

　　如果单纯写成这样，在java后台是无法取到参数的，因为jQuery需要调用jQuery.param序列化参数，

jQuery.param( obj, traditional )

　　默认的话，traditional为false，即jquery会深度序列化参数对象，以适应如PHP和Ruby on Rails框架，但servelt api无法处理，我们可以通过设置traditional 为true阻止深度序列化，然后序列化结果如下：

array: ["Jason", "Sean", "Danny"]    =>    array=Jason&array=Sean&array=Danny

　　这样，我们就可以在后台通过request.getParameterValues()来获取参数的值数组了。

　　那么，在后台如果想把数组传递给jq该怎么做呢？

　　方法有很多，其中比较好用的方法就是借助json来传递。

　　想要用json来传递，在ajax里面要设置返回的dataType类型为：　　

$.ajax{
      url:"xxxx",
      dataType: "json",
      data:{
            array: ["Jason","Sean","Danny"]
      }
}

　　Java中要用到JSON必须导入以下这几个jar包：commons-beanutils-1.8.0.jar，commons-collections-3.2.jar，commons-configuration-1.8.jar，commons-lang-2.6.jar，commons-logging-1.1.1.jar，ezmorph-1.0.6.jar和json-lib-2.4.jar。

　　后台可以先将数组的元素放到列表里面，在通过JSONArray的fromObject()方法转换为JSON数组：

String[] data = req.getParameterValues("array");
ArrayList<String> list = new ArrayList<String>();
for (int i = 0; i < data.length; i++) {
    list.add(data[i]);
    System.out.println(data[i]);
}
//将list装换为Json数组（JSONArray）
JSONArray arry = JSONArray.fromObject(list);

　　在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以还要设置

resp.setHeader("Cache-Control", "no-cache");
resp.setContentType("text/json; charset=utf-8");

　　最后在通过respone的getWriter()方法将其传给客户端。

　　示例：

　　jsp部分：

<table>
      <tr>
          <td><input type="text" name="data" value="Jason" /></td>
      </tr>
      <tr>
          <td><input type="text" name="data" value="Sean" /></td>
      </tr>
      <tr>
          <td>
              <input type="text" name="data" value="Danny" />
              <input type="button" value="OK" onclick="arrayData();" />
          </td>
      </tr>
</table>

　　js部分：

function arrayData(){            
    var array = $("input[name='data']");            
    var dataArray = new Array();    
    array.each(function(){
        dataArray.push($(this).val());
    });            
    //alert(dataArray);
            
    $.ajax({            
         type: "GET",
         url: "JsonServelet",
         dataType: "json",
         traditional: true,
         data: {
                array: dataArray
         },                              
         success: function(data){
            for ( var i = 0; i < data.length; i++) {
                alert(data[i]);
            }        
         }
    });
}

　　Java部分：

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
    req.setCharacterEncoding("UTF-8");
    String[] data = req.getParameterValues("array");
    ArrayList<String> list = new ArrayList<String>();
    for (int i = 0; i < data.length; i++) {
        list.add(data[i]);
        System.out.println(data[i]);
    }
    //将list装换为Json数组（JSONArray）
    String json = JSONArray.fromObject(list).toString();         
    resp.setHeader("Cache-Control", "no-cache");
    resp.setContentType("text/json; charset=utf-8");
    resp.getWriter().print(json);
    resp.getWriter().flush();        
}

前台和后台互相传递数组

前台和后台互相传递数组

猜你喜欢