前台和后台互相传递数组
最近做项目要用到将多个字符串通过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