jQuery通过ajax传送数组的问题

$.ajax等api在我刚开始使用的时候，以为仅仅能发送form表单，后来慢慢才知道，原来还能发送简单的一个字符串或者是多个数组！如果是数组的话，只需要在struts2后台，创建一个List<String>数组同名就可以自动封装了，很是方便。当时遇到很多问题，现在有空回头整理一下ajax发送数组的问题。结合查询了多个BLOG，这里集中总结：

（1）查询到的BLOG

最近在用jQuery的ajax方法发送请求时需要发送一个数组作为参数，结果在后台接收的时候发现接收不到这个数组。代码时这样的：

1	var arr = []

2	arr.push(“aaa”);

3	arr.push(“bbb”);

4	arr.push(“ccc”);

5

$.ajax({

6	url:”a.html”,

7	data:{“arr”:arr},

8	type:”post”

9

});

查看firebug的网络信息，发现发送的post信息中的数组信息为&arr[]=aaa&arr[]=bbb&arr[]=ccc。多了一对方括号，所以在servlet中不能通过request.getParameter(‘arr’)获取到正常的数组参数。

google之后发现，需要在data参数里，加一个traditional：true的参数，这样就能正常发送数组参数了。
原因时从1.4以后，jQuery改变了参数的序列化方法。

（2）关于上一篇提到的traditional参数的解释的，另一篇blog

一般的，可能有些人在一个参数有多个值的情况下，可能以某个字符分隔的形式传递，比如页面上有多个checkbox：

1

$.ajax{

2	url:"xxxx",

3

data:{

4	p: "123,456,789"

5

}

6

}

    然后后台获取参数后再分隔，这种做法有很大弊端，试问如果某一个参数值中出现了分隔符所使用的字符，会出现什么情况呢？当然后台获取的参数将与实际情况不符. 
这时我想到了将上述代码写成这样：

1

$.ajax{

2	url:"xxxx",

3

data:{

4	p: ["123", "456", "789"]

5

}

6

}

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

1	jQuery.param( obj, traditional )

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

1	p: ["123", "456", "789"]    =>    p=123&p=456&p=456

    随即，我们就可以在后台通过request.getParameterValues()来获取参数的值数组了， 
    所以，比如我们前台有多个checkbox，前台的代码可以写成： 

01	var values = $("input[type=checkbox]").map(function(){

02	return $(this).val();

03

}).get();

04

$.ajax{

05	url:"xxxx",

06	traditional: true,

07

data:{

08

p: values

09

}

10

}

（3）以下是我根据以上两篇文章，自己写的前台代码，可以正常使用

function submitProblemFromPaper(number){//number为表的号码
			var validateFlag = false;//用于验证是否为空的标志
			$('[name="tips"]').remove();
			 $('#problem'+number+' :text').each(function(){
				 if($(this).val()==""){
					 $(this).after("<span name='tips'>必须输入数据</span>");
					 validateFlag = false;
				 }else{
					 validateFlag = true;
				 }
			 });
			 var pattern = /^\d+$/;
			 var validateFlag2 = false;//用于标记是否为整形数字的标记
		    if(validateFlag){
				 $('[name="scores"]').each(function(){
					 if(pattern.test($(this).val())){
						 validateFlag2 = true;
					 }else{
						 $(this).after("<span name='tips'>必须输入一个整数</span>");
						 validateFlag2 = false;
						 return false;
				 	}
			 	});
			 }
		    var validateFlag3 = false;//用于选项顺序是否为整形数字的标记
		    if(validateFlag2){
				 $('[name="sorts"]').each(function(){
					 if(pattern.test($(this).val())){
						 validateFlag3 = true;
					 }else{
						 $(this).after("<span name='tips'>必须输入一个整数</span>");
						 validateFlag3 = false;
						 return false;
				 	}
				 
			 	});
			 }
			if(validateFlag2 && validateFlag && validateFlag3){
			var problemId2 = 0;//ajax返回的problemId
			
			//以下为获得文本输入并存入对应的数组
			var contents = new Array();
			var sorts = new Array();
			var scores = new Array();
			var signs = new Array();
			var problem = new Array();
			$("#problem"+number+" [name='contents']").each(function(){
				contents.push($(this).val());
			});
			$("#problem"+number+" [name='sorts']").each(function(){
				sorts.push($(this).val());
			});
			$("#problem"+number+" [name='scores']").each(function(){
				scores.push($(this).val());
			});
			$("#problem"+number+" [name='signs']").each(function(){
				signs.push($(this).val());
			});
			problem.push($("#problem"+number+" [name='entity.content']").val());
			problem.push($("#problem"+number+" :radio:checked").val());
			
			var content2 = $("#problem"+number+" [name='entity.content']").val();
			var swap = $("#problem"+number+" :radio:checked").attr("va");
			$("#problem"+number+" :radio").parent().remove();
			$("#problem"+number+" tr:eq(2)").append("<span>"+swap+"</span>");
			
			//以下删除hidden控件及其他input控件，并将value转成span内的数据，hidden的除外
		    $("#problem"+number+" :button").remove();
			$("#problem"+number+" [type='hidden']").remove();
		    $("#problem"+number+" :input").each(function(){
				var swap = $(this).val();
				$(this).replaceWith("<span>"+swap+"</span>");
			}); 
		    
		    $.ajax({
				url:"../question/submitProblemFromPaper.action",
				data:{"contents":contents,"scores":scores,"signs":signs,"sorts":sorts,"problem":problem},
				traditional:true,
				type:"post",
				success:function(data){
					problemId2 = data;
					$("#paper1 tr:last").after("<tr id='tr"+problemId2+"' name='tr"+problemId2+"'><td><input type='hidden' name='problemIds' value='"+problemId2+"'/>"
				    		+"<input type='button' value='删除该题' name='deleteBtn"+problemId2+"' οnclick='deleteProblem2(\""+problemId2+"\",this)'/></td>"
				    		+"<td>"+content2+"</td></tr>");
					$("#form2").empty();
				},
				error:function(){
					alert("添加失败，请重新确认数据是否准确");
				}
			});
			}
		    
		};

以上就是发送数组的js代码，当然这里也顺带提一下，如果你发送的是整个form表单，需要在data的参数里调用$("#form1").serialize()来进行一下序列化。

 $.ajax({
					url:"submitPaper.action",
					data:$("#form1").serialize(),
					type:"post",
					success:function(data){
						$('[name = "paperId"]').val(data);
						var swap=$("#name").val();
						$("#name").replaceWith("<p>"+swap+"<p>"); 
						swap=$("#content").val();
						$("#content").replaceWith("<p>"+swap+"<p>"); 
						swap=$("#type").val();
						$("#type").replaceWith("<p>"+swap+"<p>"); 
						swap=$("#createUser").val();
						$("#createUser").replaceWith("<p>"+swap+"<p>"); 
						
						$("#subbtn").after("<input type='button' id='chooseProblem' value='去题库选题' οnclick='getProblemWindow();'/>"
											+"<input type='button' id='addProblemBtn' value='手动加题' οnclick='addProblem();'/>");
						$("#subbtn").remove();
						$("#paper1").append("<tr id='begin'><td>题号<b>（可通过生成题号按钮，查看每题对应题号）</b>"
						+"<input type='button' value='生成题号&查重题' οnclick='generateId();'/></td><td>题目内容</td></tr>");
					},
					error:function(){
						alert("添加失败,请重试");
					}
				});