最新消息:

javascript与JSON字符串区别、解析、jsonp跨域、模版引擎、轮播学习总结

Ajax/js 大步 669浏览 0评论
文章末尾会给出demo的源代码

JSON字符串:

json的key用双引号包裹
json的key可以是任何合法的字符串
json的value有六种数据类型:
  1. string
  2. number
  3. object
  4. array
  5. boolean
  6. null
json中的value除了string类型,其他的都不需要双引号包裹

Javascript 对象

Javascript对象与json类似,但是有些区别:
1.key的双引号不是必须的
也是合法的
2.Javascript对象可以是任何数据类型:

解析json(parse json)

json字符串先必须解析为js对象。可以使用

将Javascript对象转换为json字符串

JSON.stringify():将Javascript对象转换为json字符串。
也可以使用功能更强大的jquery库来实现。

访问/获取json的值

假设有json对象:
方式1:
info.full_name
方式2(这种方式适用范围更广):
info["full_name"]

访问Javascript对象的数组

json中方括号(“ [ ]”)包裹的就是数组(array)。
第一种:数组中的元素没有key的情况,这时候通过元素的索引(index)值来访问。
第二种:数组中的元素有key的情况,直接使用key来访问元素
实例:
将json字符串中的links以html的形式输出

 

通过http请求获取json数据,并解析

把下面三个文件放到http服务器上
index.html:
然后是myscript.js: 用来发起http请求,以及解析json数据
data.json:存放json字符串

使用jsonp的方式请求json,避免跨域问题

由于浏览器的同源策略,总会遇到js的跨域问题。所以,我们这里使用jsonp来避免。这里使用纯js的方法来处理。
jsonp的原理是,在json字符串前写好一个js函数名,然后使用与Javascript加载方式一样加载这个json字符串。如下:
data.json:
然后在js定义一个dataHandler的函数,myscript.js:
index.html:
这样,当我们使用调用js文件一样的方式来调用json文件的时候,就好像是调用js的dataHandler(),而json字符串就是作为这个函数的参数。

用Jquery来获取解析json

同样的,把下面三个文件放到http服务器
index.html:
myscrpit.js:调用jquery来处理和解析json

data.json:

用模板引擎(template engine)来实现json解析

所谓模板引擎,就是说在html代码中留下占位符(placeholder),并按照模版引擎的规则写好模版代码,然后通过模板引擎用json里的数据动态的替换那些占位符。这样,就省去了自己手动拼写html代码的麻烦。对于html5 app的开发,很方便,有名的模板引擎有:
1.Mustache
2.Underscore Templates
3.国内的有baiduTemplate、artTemplate
这里我们用Mustache来作为模版引擎来举例:
还是下面的文件/文件夹放到http服务器:
假设我们的images/目录下有下列图片,注意,图片的命名规则,是以 “人名+tb.jpg”。这里我就不上图片了,大家自己去找图片 ,随便改个名字用吧。
    Barot_Bellingham_tn.jpg
    Constance_Smith_tn.jpg
    Hassum_Harrod_tn.jpg
    Hillary_Goldwynn_tn.jpg
    Jennifer_Jerome_tn.jpg
    Jonathan_Ferrar_tn.jpg
    LaVonne_LaRue_tn.jpg
    Riley_Rewington_tn.jpg
    Xhou_Ta_tn.jpg
然后是index.html: 使用了模板引擎
解释:当获取到json数据后,用模板引擎用json中的数据替换html中的占位符,以此实现动态更换网页内容。这样不用手动拼写html代码了,节省开发时间。
最后是data.json:
效果:
mustache

使用Jquery的Cycle插件实现内容滚动播放

就是将上面的那个模板引擎的实例改成滚动显示的方式,需要使用到jquery的cycle插件,将index.html改成:
next和prev:指定点击切换按钮的id
效果:(懒得截取gif了)
jquery_cycle

 

接着加上CSS,使用谷歌字体

上面代码的功能完成了,但是没有加css,所以我们接着加css样式,css中要使用到google font ,也就是网络字体。这样不用担心打开我们网页的用户的电脑中没有我们需要的字体,影响网页的美观。
打开https://www.google.com/fonts  (自己备梯*子)
然后搜索选择自己的要的字体,add collections,在生成链接,添加到html中:
index.html: 添加了谷歌字体和css
mystyle.css:
效果:
add_css
点击下载demo
参考:以上内容都是看Lynda网站的 JavaScript and JSON的总结

转载请注明:大步's Blog » javascript与JSON字符串区别、解析、jsonp跨域、模版引擎、轮播学习总结

SiteMap