教你怎么用ajax传数组(也可以是转为json)

简介: 教你怎么用ajax传数组(也可以是转为json)

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

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

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

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

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

这样的,那么这个时候他们的数据就是这样的:

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 字符串。

text/xml

它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。

最后没有看明白的朋友可以私信我,或者直接评论出来,看到了的我会回复的,另外喜欢手机的可以关注我的网站搞机族

相关文章
|
27天前
|
JSON 前端开发 JavaScript
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
2月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
29 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
25天前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
11 0
|
2月前
|
SQL JSON Apache
Flink问题之嵌套 json 中string 数组的解析异常如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。
218 1
|
3月前
|
JSON PHP 数据格式
php 删掉空的数组 json数据. 空数据(false 0 ““ null)
php 删掉空的数组 json数据. 空数据(false 0 ““ null)
php 删掉空的数组 json数据. 空数据(false 0 ““ null)
|
前端开发 Java 数据库连接
checkbox选中并通过ajax传数组到后台接收
这次讲的是通过复选框,选中,点击提交,并将值chuan到后台controller。这个应用是比较广的,什么批量修改,批量添加,授权管理等等,都用到这个。其实这个还是挺简单的,并没有想象中的那么难,但我看到不少朋友在此处受挫,当然曾经的我也是如此。
2207 0
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
38 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
53 0
|
4月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤