JSON(及其在ajax前后端交互的过程)小识
创始人
2024-03-16 20:18:05
0

一. 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官网:

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", //返回数据形式为jsonsuccess : function(result) {if (result) {console.log(result);for(var i=0;i

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

相关内容

热门资讯

警惕诈骗!女子借来9万现金打车... 转自:天津日报 #司机接单送1箱现金直接锁车报警#【警惕...
“让孩子们的人生少些弯道”(乡... 转自:人民日报原标题:湖南安化县南金乡将军完小90后校长庞晓晓从教十年“让孩子们的人生少些弯道”(乡...
华夏基金总经理李一梅:强化与投... 华夏基金管理有限公司总经理 李一梅中国证监会近日发布《推动公募基金高质量发展行动方案》,这是落实中共...
人民医院牵手展览路医院,居民不... 转自:北京日报客户端近日,北大人民医院骨科专家团队在西城区展览路医院成立了骨健康工作室,除了开展骨科...
学生被7个机构教官殴打致耳聋 转自:今晚报 【#学生被7个机构教官殴打致耳聋#】#问题...
袁寿其研究员入选全球前0.05... 转自:扬子晚报扬子晚报网5月9日讯(通讯员 江流 记者 万凌云) 近日,国际权威学术评价机构Scho...
不合格!这些衣服你是否在穿?涉... 近日,北京市丰台区公示2024年产品质量监督抽查结果。本次共检出11批次儿童及婴幼儿服装产品质量不符...
启东吕四公安开展母亲节、思廉日... 转自:扬子晚报为进一步弘扬中华民族孝顺父母传统美德,营造尊母敬母的浓密情感氛围。近日,启东市公安局吕...
智利一架医疗救护飞机坠毁致6人... 转自:京报网_北京日报官方网站 【#智利一架医疗救护飞机...
湖北省浠水县市场监管局高效调解... 中国质量新闻网讯 “没想到一通电话就解决了大难题!市场监管部门办事效率高,是实实在在为群众解决问题,...
“原味乌兰察布”即将亮相202... 转自:新华财经5月9日,以“品牌,让世界更美好”为主题的2025世界品牌莫干山大会在浙江德清举行。内...
小鹏汇天距正式“上天”更近一步... 财联社5月9日讯(记者 徐昊)5月9日,小鹏汇天宣布,“陆地航母”飞行体(代号:X3-F)生产许可证...
组团狂退演出服,“薅羊毛”之风... 转自:中工网原标题:组团狂退演出服,“薅羊毛”之风当刹市场经济的诚信原则,需要全社会共同维护。唯此,...
台股收涨1.81%,较前期低点... 格隆汇5月9日|台湾加权指数收涨1.81%,报20915.04点,较4月初的最低点(17306.97...
专栏|南非柑橘小镇的焦虑——关... 转自:新华网客户端新华社约翰内斯堡5月9日电 题:南非柑橘小镇的焦虑——关税海啸中的国别观察新华社记...
广东100多个暴雨预警生效中!... 今天(5月9日),随着冷空气继续南下,强降雨将影响江南南部和华南等地,局地有暴雨。同时还会伴有短时强...
OLED显示器热销 机构看好概... 人民财讯5月9日电,随着各下游终端对显示性能需求的不断提升,OLED市场规模及出货量得以持续增长。T...
跨越时空,守护共同的历史记忆 转自:人民网-国际频道 在世界反法西斯战争中,中俄两国人...
孙姓股民向*ST锦港发起索赔 ...   受损股民可至Hehson股民维权平台登记该公司维权:http://wq.finance.sina...
莫斯科:纪念苏联伟大卫国战争胜... 5月9日,在俄罗斯首都莫斯科,士兵集结准备参加纪念苏联伟大卫国战争胜利80周年阅兵式。5月9日,在俄...