教你怎么用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 作为编码方式的远程调用规范。

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

相关文章
|
3月前
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例,Axios + JSON 品牌列表查询和添加
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
|
4月前
|
JSON 前端开发 JavaScript
php中JSON或数组到formData的键值对转换
转换JSON或数组到formData格式的键值对并不复杂。PHP的 `json_decode()`与 `http_build_query()`是实现这一转换过程的关键函数。理解这个转换过程对于开发中处理各种AJAX请求时调整数据格式至关重要。这样,无论是处理来自客户端的JSON字符串,还是服务器端的数组数据,都能够灵活地转换为适合网络传输的格式,确保数据交换的顺畅和高效。
106 4
|
4月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
41 0
|
4月前
|
SQL JSON 关系型数据库
"SQL老司机大揭秘:如何在数据库中玩转数组、映射与JSON,解锁数据处理的无限可能,一场数据与技术的激情碰撞!"
【8月更文挑战第21天】SQL作为数据库语言,其能力不断进化,尤其是在处理复杂数据类型如数组、映射及JSON方面。例如,PostgreSQL自8.2版起支持数组类型,并提供`unnest()`和`array_agg()`等函数用于数组的操作。对于映射类型,虽然SQL标准未直接支持,但通过JSON数据类型间接实现了键值对的存储与查询。如在PostgreSQL中创建含JSONB类型的表,并使用`-&gt;&gt;`提取特定字段或`@&gt;`进行复杂条件筛选。掌握这些技巧对于高效管理现代数据至关重要,并预示着SQL在未来数据处理领域将持续扮演核心角色。
67 0
|
4月前
|
JSON JavaScript 数据格式
Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中
Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中
86 0
|
6月前
|
JSON 关系型数据库 MySQL
MySQL中GROUP_CONCAT与JSON_OBJECT、GROUP BY的巧妙结合:打造高效JSON数组汇总
MySQL中GROUP_CONCAT与JSON_OBJECT、GROUP BY的巧妙结合:打造高效JSON数组汇总
191 1
|
6月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
38 0
|
6月前
|
JSON 资源调度 Kubernetes
实时计算 Flink版操作报错合集之解析JSON数组时,遇到报错,该怎么解决
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
|
2月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道
|
1月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。