前台和后台互相传递数组

  最近做项目要用到将多个字符串通过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();        
}

   部分参考:http://my.oschina.net/i33/blog/119506

posted on 2014-12-03 15:42  Jason_XW_Li  阅读(49210)  评论(1编辑  收藏  举报