java ajax 接收数组 ajax获取数组

转载

冷月星 2024-04-17 14:36:45

文章标签 java ajax 接收数组 ajax jquery json contentType 文章分类 Java 后端开发

我之前写过一个关于ajax的详解，那个是标准的ajax，今天介绍的是怎么用ajax传递数组这样的数据类型呢？很多的时候我们需要给后端的数据不是几个单独的数据，一般见到的代码的是这样的：

data: {
id : id,
name : name,
sex : sex
}

这样的是最常见的一种数据格式，常用的是注册和登录，结合jQuery将用户输入的用户信息取出来，赋值给一个变量，类似于这样的：

var id = $("#id");
var name = $("#name");
var sex = $("#sex");

然后就是之前说的，将数据放到data里面，当然这是最常见的一种传输方式，但是真正的项目中有的时候是多条数据，是我们遍历出来的，然后是数组的格式传递过去的，类似于：

java ajax 接收数组 ajax获取数组_jquery

这样的，那么这个时候他们的数据就是这样的：

0:{id: 1, name: "感冒", num: "2"}
1:{id: 2, name: "发烧", num: "4"}
2:{id: 3, name: "头痛", num: "5"}
length:3

那么这个时候，ajax直接写data一个一个的写行不行呢？当然是可以的，但是当你添加一列的时候就会头痛了，数据永远是不对的，所以这个时候就需要这样处理数据：

声明一个数组：

var caseVOS = [];
	/*遍历的取数据·*/
	for( var j=1;j<=i;j++){
		var data={
			name:$("#" + "name" + j).val(),
			num:$("#" + "ls" + j).val()
			}
                caseVOS.push(data);
			      }

如果您不知道里面的i是什么，没关系，是这样的：

if(divListFlg.length<5){
				i++;
				divListFlg.push(i)
				var divRow ='<div class="row" style="margin-top: 1rem; " id="addrows'+i+'" >' +
					'<div class="col-xs-2" id="addzd'+i+'"> ' +
					'<input type="text" class="form-control" placeholder="诊断名" id="name'+i+'"  style="background:#FFFFFF;">' +
					'</div>' +
					'<div class="col-xs-2" id="addzd'+i+'"> ' +
					'<input type="text" class="form-control" placeholder="例数" id="ls'+i+'"  style="background:#FFFFFF;">' +
					'</div>' +
					'</div>';
				$("#div_add:last").append(divRow);
			}else{
				 layer.msg("一次最多操作五条");
		  	}

其实就是我新加一列的js，我们需要判断的是用户是不是无限增加了，这个是项目的需求，不要纠结。ok回到传递数据的地方，这个时候数据取到了，是数组，怎么给ajax传递过去呢？看代码：

/*这个时候是已经将数据取出来了，但是是需要将数据发送给后端的，所以需要的是写一个ajax*/
			  $.ajax({
				type:"post",
				url:"/user/case/refer",
				data : JSON.stringify(caseVOS),
                                dataType:"json",
				contentType:"application/json",
                                async:false,
				success:function(data){ 
					if(data.code == 200){
						layer.msg('发布成功！', {
		  					}, function(){
		  					//跳转的URL重定向到新的页面，这里是直接跳转到个人中心
		  					window.location.href='personal_homepage.html';
		  					}); 
					}
					else{
					        layer.alert("res"+result);
						layer.msg(data.message);
					}
				}
			});

这是一段简单的ajax ，但是已经是可以将数组的数据传递过去了，里面需要说明的一点是，

contentType是传输过去的时候的数据类型，dataType是接收服务器的时候的数据类型

所以如果不设置这里的话，也是可以的，只是看你的后端代码的数据类型是什么样的，根据情况来看的，这个是没有关系的。

那么contentType的格式其实有四种：

application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值

application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

Google 的 AngularJS 中的 Ajax 功能，默认就是提交 JSON 字符串。