JSON入门指南--客户端处理JSON
在传统的Web开发过程中,前端工程师或者后台工程师会在页面上写后台的相关代码,比如在ASP.NET MVC4里面写如下代码:
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/white-space: pre;/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
这样的代码有优点,当然也有缺点。缺点就是前后端分离的不彻底,前端工程师需要了解一些后台的代码,而已在不能把前端和后台都分开开发和部署。采用JSON就可以解决这一问题。就是前端和后台交换数据的格式都采用JSON。JSON:JavaScript Object Notation的缩写,是一种基于JavaScript的字面量表达式的数据格式类型。在ECMAScript第5版标准中也包含了JSON这一类型。
JSON能够通过4种基本数据类型以及2种数据结构化数据类型来表示。4种基本数据类型是:字符串值型,数值型,布尔型和null型。结构化数据类型是对象和数组这两种。举例如下:
数据类型 |
开发过程中,很多操作都包含了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);
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
//将对象转换JSON字符串
var test=JSON.stringify({x:1,y:2,val:'foobar'});
console.log(test);
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
在实际开发过程中,经常使用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]);
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
以上仅讨论客户端,也就是浏览器里面如何JSON,在后台开发过程中,也需要解析JSON,或者把C#,PHP或者Java的数据内容生成JSON。下一篇博客主要介绍这个内容。
参考网址:https://developer.mozilla.org/zh-CN/docs/JSON
JSON格式验证:http://jsonlint.com/
JSON入门:http://www.ibm.com/developerworks/cn/web/wa-lo-json/
JSON入门指南--客户端处理JSON的更多相关文章
- JSON入门指南
JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,很适合于server与 JavaScript 的交互.本文将高速解说 JSON 格式.并通过代码演示样 ...
- [转]JSON 入门指南
原文地址:http://www.ibm.com/developerworks/cn/web/wa-lo-json/ 尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web ...
- JSON入门指南--服务端处理JSON
平时公司使用的ASP.NET MVC3来开发Web项目,其实在ASP.NET中已经原生的支持JSON.所以基本不需要引进Newtonsoft.Json.dll.下面看在MVC4中,后台生成JSON数据 ...
- JSON取代XML?--JSON入门指南
定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C# ...
- 【译】JWT(JSON Web Token) 入门指南
JWT 入门指南 原文地址:https://blog.angular-university.io/angular-jwt/ 这篇文章是两篇手把手教你如何在Angular应用(也适用于企业级应用)中实现 ...
- JSON风格指南-真经
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...
- JSON风格指南
中文版:https://github.com/darcyliu/google-styleguide/blob/master/JSONStyleGuide.md 英文版:https://google.g ...
- SpringMVC客户端发送json数据时报400错误
当测试客户端发送json数据给服务器时,找不到响应路径? 原来是参数类型不符,即使是json也要考虑参数的个数和类型 解决:将age请求参数由"udf"改为"3" ...
- JSON入门教程
尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 ...
随机推荐
- js get browser vertion (js获取浏览器信息版本)
1问题:js get browser vertion (js获取浏览器信息版本) 2解决方案 Copy this script into your JavaScript files. It works ...
- duplicate symbols for architecture arm64 after xCode 8.0 update
Xcode IDE 从7.3.1 update 到 8.0 之后出现的问题 一个错误把我困扰了两天之久,最终找到解决办法我欣喜若狂. 错误发生原因:Xcode IDE 从7.3.1 update ...
- 安卓手机USB网络共享,电脑卡顿、反应慢
1.首先需要把手机连接到电脑,在手机上打开USB网络共享. 2.打开设备管理器 3.在网络适配器中,找到Remote NDIS based Internet Sharing Device,右键更新驱动 ...
- GOOD MEETINGS CREATE SHARED UNDERSTANDING, NOT BRDS!
Deliverables and artifacts were a focal point of BA work during the early part of my career. If I ...
- [Android] 多重使用Fragment 中的onFragmentInteraction
新建的一个Fragment,被一个Activity使用,那么这个Activity需要继承一个接口: public class MainActivity extends Activity impleme ...
- Win10 下安装 NodeJS
1,右键点击底部导航栏win(开始)弹出,使用 命令提示符(管理员A) 2,输入命令,进入安装文件目录,输入 msiexec/package node-v4.4.4-x64.msi ----弹出安 ...
- 异常处理_Maven多模块web项目整合ssm+dubbo
异常如下: [ERROR][org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader. ...
- (转)Vsdocman7.2 注册版
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...
- 吐槽scala
scala可能是唯一一个编译器和IDE对代码有不同理解的语言.当你开始用scala的高级特性的时候,他们的分歧特别的大,以至于现在,intellij上的scala插件已经不敢对可能编译不通过的代码标记 ...
- CF2.BC
B. Arpa's obvious problem and Mehrdad's terrible solution time limit per test 1 second memory limit ...