JSON入门指南--客户端处理JSON

简介:

在传统的Web开发过程中,前端工程师或者后台工程师会在页面上写后台的相关代码,比如在ASP.NET MVC4里面写如下代码:

 

这样的代码有优点,当然也有缺点。缺点就是前后端分离的不彻底,前端工程师需要了解一些后台的代码,而已在不能把前 端和后台都分开开发和部署。采用JSON就可以解决这一问题。就是前端和后台交换数据的格式都采用JSON。JSON:JavaScript Object Notation的缩写,是一种基于JavaScript的字面量表达式的数据格式类型。在ECMAScript第5版标准中也包含了JSON这一类型。

JSON能够通过4种基本数据类型以及2种数据结构化数据类型来表示。4种基本数据类型是:字符串值型,数值型,布尔型和null型。结构化数据类型是对象和数组这两种。举例如下:

数据类型 举例
字符串 “test”
数值 123
布尔型 true或者false
null值 null
对象 {"x":1,"y":2,"val":"foobar"}
数组 {1,2,true,'hello'}

 

开发过程中,很多操作都包含了JSON格式数据类型的字符串与JavaScript对象间的相互转换。在Ajax提 交表单时,需要将内部的对象转换JSON字符串之后再传输。而在接收JSON数据端,需要先将JSON字符串转换为JavaScript对象之后,才能不 借助第三方类库对其值进行操作。在浏览器不支持JSON.stringify()和JSON.parse()方法之前,开发者都会使用json2.js在 前端处理JSON字符串和JSON对象之间的转换。下面举例说明,将JSON字符串转换对象,将对象转换为JSON字符串。

//将JSON字符串转换对象

var s='{"x":1,"y":2,"val":"foobar"}';    var obj=JSON.parse(s);
//将对象转换JSON字符串
var test=JSON.stringify({x:1,y:2,val:'foobar'});console.log(test);
在实际开发过程中,经常使用JSON数组,和包含数组的JSON,如下代码所示:
var result=JSON.parse('[{"name":"aaa","age":"20","gender":"female"},{"name":"bbb","age":"21","gender":"male"},{"name":"ccc","age":"22","gender":"male"}]');                        for(var index in result){                document.write(result[index].name);            }                        var result1=JSON.parse('{"counts":5,"items":["aaa","bbb","ccc","ddd"]}');//包含数组的JSON字符串            console.log(result1.counts);                        for(var index in result1.items){                console.log(result1.items[index]);            }

以上仅讨论客户端,也就是浏览器里面如何JSON,在后台开发过程中,也需要解析JSON,或者把C#,PHP或者Java的数据内容生成JSON。下一篇博客主要介绍这个内容。

目录
相关文章
|
5月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
114 1
|
5月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
263 0
|
2月前
|
JSON 数据格式
langchain 入门指南 - JSON 形式输出大模型的响应
langchain 入门指南 - JSON 形式输出大模型的响应
80 0
|
5月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
42 1
|
10月前
|
数据采集 JSON JavaScript
C# 解析“JSON“格式数据和网络实战案例 入门
C# 解析“JSON“格式数据和网络实战案例 入门
|
存储 JSON Go
Go 语言快速入门指南:Go 语言解析 JSON(上)
本文将说明如何利用 Go 语言将 JSON 解析为结构体和数组,如果解析 JSON 的嵌入对象,如何将 JSON 的自定义属性名称映射到结构体,如何解析非结构化的 JSON 字符串。
|
12月前
|
JSON 数据格式
02zTree - 最简单的入门例子(JSON 数据)
02zTree - 最简单的入门例子(JSON 数据)
71 0
|
Web App开发 JSON 前端开发
SAP UI5 应用开发教程之九十七 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的明细页面试读版
SAP UI5 应用开发教程之九十七 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的明细页面试读版
|
Web App开发 JSON 前端开发
SAP UI5 应用开发教程之九十一 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的列表页面试读版
SAP UI5 应用开发教程之九十一 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的列表页面试读版
|
存储 JSON 数据格式
Python快速上手系列--JSON--入门篇
Python快速上手系列--JSON--入门篇
76 0

热门文章

最新文章

下一篇
无影云桌面