一. json介绍



json是一种轻量级的数据交换格式,规则很简单:

  1. 并列的数据之间用逗号(,)分隔;
  2. 映射用冒号(:)表示;
  3. 并列数据的集合(数组)用方括号([])表示;
  4. 映射的集合(对象)用大括号({})表示。

    对上述规则解析,可以发现:
  • 数组是用([])创建的,对象是用({})创建的;
  • 数组和对象里面的元素都是用(,)隔开:{name:"李华",age:"18",home:"shanghai"}&&[]
  • 对象和数组可以相互嵌套,一个数组中的一个元素可以是对象或数组,一个对象中的一个属性的值也可以是一个对象或数组;
  • 对象内部,属性的名称和值用(:)隔开,不能单独存在属性名或者值。
    对象:
    {name:"lihua",age:"18",home:"shanghai"} 数组:
    [{"name":"李华","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飞","age":"25","home":"深圳"}]

数组和对象都是数据的集合,除了使用符号不同,最重要的差异是:数组内的数据是有序的,而对象内的数据是无序的。

#二.json在前后端数据交互中的应用

1. 服务端数据处理

1.1 json_encode

后台将数据处理成json格式,前端通过ajax调用进行DOM操作。在php中,数组分为三类:索引数组;关联数组;多维数组。而在javascript中,只有索引数组。

所以,php中 json_encode()只将索引数组转成json数组格式,而将关联数组/多维数组转成json对象格式。

$arr = array(111,'aaa','bbb');
$arr1 = array(
'a' => 'aaa',
'b' => 222
);
$arr2 = array(
'a' => 'aaa',
'other' => array(
'bbb',1111
)
);
echo json_encode($arr); //[111,"aaa","bbb"]
echo json_encode($arr1); //{"a":"aaa","b":222}
echo json_encode($arr2); //{"a":"aaa","other":["bbb",1111]}

####1.2 json_decode

php对json格式的字符串进行解码,将其转为php常量。

下例来自php官网:

<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json)); //返回一个对象
var_dump(json_decode($json, true)); //返回一个数组 ?>
object(stdClass)#1 (5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
} array(5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}

###2.前端对json的处理

前端通过ajax请求回数据后,如果使用jquery中的$.ajax,则只需要声明返回的数据类型dataType:'json';

如果用原生javascript解析json,则有三种方法:

  • eval()
  • new Function()
  • JSON.parse()

这里就不赘述了,有需要的可以自行去查阅。

####2.1 遍历复杂json

有时候需要对json进行循环遍历,比如画echart图的时候,如果用json中元素的某个属性值作为x轴数据,用另外一个属性值作为映射值。

 [{"name":"李华","age":"18","home":"上海"},{"name":"小明","age":"21","home":"北京"},{"name":"阿飞","age":"25","home":"深圳"}]

以上述json作为例子,要用name作为x轴,age作为对应值。就需要对json遍历两次,将所有的name属性值push为一个数组,同样,将所有的age属性值push为一个数组,再赋值给相对应的坐标。

success : function(result)
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "test1.php",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
console.log(result);
for(var i=0;i<result.length;i++){
console.log(result[i].name);
arr.push(result[i].name);
}
}
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
//控制台打印出ajax解析之后的结果:[Object, Object, Object, Object, Object, Object, Object, Object]

至此,重识JSON,前后端之相交脉络亦了然一二。更觉前端道阻且长,唯上下八方求索,方不落人后。

JSON(及其在ajax前后端交互的过程)小识的更多相关文章

  1. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. SSM-网站后台管理系统制作(4)---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  3. AJAX 前后端交互 验证信息是否正确

    1.前段: function checkPtCode(obj){ $.ajax({ type: "post", url: "xxxxxxx", data: {& ...

  4. ajax前后端交互原理(7)

    7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head&g ...

  5. ajax前后端交互原理(6)

    6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...

  6. ajax前后端交互原理(5)

    5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...

  7. ajax前后端交互原理(1)

    1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...

  8. ajax前后端交互原理(4)

    4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...

  9. ajax前后端交互原理(3)

    3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...

随机推荐

  1. SQL Server 大数据搬迁之文件组备份还原实战

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 解决方案(Solution) 搬迁步骤(Procedure) 搬迁脚本(SQL Codes) ...

  2. 火焰图分析openresty性能瓶颈

    注:本文操作基于CentOS 系统 准备工作 用wget从https://sourceware.org/systemtap/ftp/releases/下载最新版的systemtap.tar.gz压缩包 ...

  3. Gradle配置APK自动签名完整流程

    转载请注明出处:http://www.cnblogs.com/LT5505/p/6256683.html 一.生成签名 1.命令行生成签名,输入命令keytool -genkey -v -keysto ...

  4. .NET 基础 一步步 一幕幕[面向对象之构造函数、析构函数]

    构造函数.析构函数 构造函数: 语法: //无参的构造函数 [访问修饰符] 函数名() :函数名必须与类名相同. //有参的构造函数 [访问修饰符] 函数名(参数列表):函数名必须与类名相同. 作用: ...

  5. 散列表(hash table)——算法导论(13)

    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...

  6. 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[下]:管道是如何构建起来的?

    在<中篇>中,我们对管道的构成以及它对请求的处理流程进行了详细介绍,接下来我们需要了解的是这样一个管道是如何被构建起来的.总的来说,管道由一个服务器和一个HttpApplication构成 ...

  7. CGI与FastCGI nginx+PHP-FPM

    本文转载自CGI与FastCGI 1.当我们在谈到cgi的时候,我们在讨论什么 最早的Web服务器简单地响应浏览器发来的HTTP请求,并将存储在服务器上的HTML文件返回给浏览器,也就是静态html. ...

  8. vscode 1.5安装体验

    1.下载安装 官方下载地址: http://code.visualstudio.com/ 界面截图: 2.图标显示功能File Icon Themes vscode1.5版本文件夹视图,可显示文件类型 ...

  9. JDBC MySQL 多表关联查询查询

    public static void main(String[] args) throws Exception{ Class.forName("com.mysql.jdbc.Driver&q ...

  10. PostGIS(解压版)安装

    1.软件下载 postgresql-9.6.1-1-windows-x64-binaries.zip https://www.postgresql.org/download/windows/ post ...