看这俩函数名,我们都知道get是获取的意思,也是面向对象编程里面经常用到的一个单词,getScript()函数我们可以猜其是获取javaScript文件,那getJson()应该是获取json文件喽?可是json是什么?
这一篇日志,通过getJson()函数和getScript()函数来继续上一篇日志的字典示例。
在介绍代码之前,我认为有必要介绍一下json,这个重量级的选手。
json:
我们都知道,JavaScript的对象和数组都是key,value对,其实我之前的文章里面也介绍过,JavaScript的数组和对象本质上是相同的。
而json,我们可以理解为以JavaScript对象直接量的形式表现的数据类型,也可以将此对象直接量直接存入文件中。
json和JavaScript的对象直接量一样,使用花括号({})来定义,但是如果我的值的映射为数组咋办?别急,在json里,数组可以用数组直接量来表示,使用方括号([])来定义
json格式很简单,但是它却不允许有任何错误,所有方括号、花括号、引号和逗号都必须合理而且适当地存在,否则文件不会加载。
例如:
{
"xiaoxiaozi"
:
{
"name"
:
"simaopig"
,
"siteurl"
:
"http://www.xiaoxiaozi.com"
}
,
"laonb"
:
{
"name"
:
"laonb"
,
"siteurl"
:
"http://www.laonb.com"
}
,
"晚餐"
:
[
"煮串"
,
"棒棒鸡"
,
"猪耳朵"
]
}
有兴趣深入了解的同学可以去访问http://json.org
getJSON():
同样,先来看一下getJson的使用方法 jQuery.getJSON(url,[data],[callback])
参数同上一节说过的.load()函数
要获得一个json文件的内容,就可以使用$.getJSON()方法,这个方法会在取得相应文件后对文件进行处理,并将处理得到的JavaScript对象提供给代码。
回调函数提供了一种等候数据返回的方式,而不是立即执行代码,回调函数也需要一个参数,该参数中保存着返回的数据。这样我们就可能使用jQuery提供的另一个全局函数(类方法).each()来实现循环操作,将.getJSON函数返回的每组数据循环处理。
getScript():
该函数是向页面中注入脚本,这与加载一个HTML片段是一样的简单,不过此方法只提供两个参数,jQuery.getScript(url,[callback])
至于为什么没有data,呃,难道你认为js文件能接收参数吗?
getJSON()与ajax请求实战:
点击字母”B”下面的按钮我们来用getJSON()的方式从b.json中加载以“字母B”开头的单词
<div class="letter" id="letter-b">
<h3>B
</h3>
<div class="button">Load
</div>
</div>
<!-- 用css文件定义id为loading的div的样式为display:none -->
<div id="loading">
Loading...
</div>
<div id="dictionary">
</div>
定义json文件
[
{
"term"
:
"BACCHUS"
,
"part"
:
"n."
,
"definition"
:
"A convenient deity invented by the ancients as an excuse for getting drunk."
,
"quote"
:
[
"Is public worship, then, a sin,"
,
"That for devotions paid to Bacchus"
,
"The lictors dare to run us in,"
,
"And resolutely thump and whack us?"
]
,
"author"
:
"Jorace"
}
,
{
"term"
:
"BACKBITE"
,
"part"
:
"v.t."
,
"definition"
:
"To speak of a man as you find him when he can't find you."
}
]
$
(document
).
ready
(
function
(
)
{
// 字母B下面的按钮被点击时触发发函数
$
(
'#letter-b .button'
).
click
(
function
(
)
{
// 加载b.json文件的内容
$.
getJSON
(
'b.json'
,
function
(data
)
{
// 先将id为dictionary的div里的内容置空
$
(
'#dictionary'
).
empty
(
)
;
// 循环处理每条返回的数据entryIndex为每一行数组的key,entry为数组的value
$.
each
(data
,
function
(entryIndex
, entry
)
{
// 拼装要显示的内容
var html
=
'<div class="entry">'
;
html
+=
'<h3 class="term">'
+ entry
[
'term'
]
+
'</h3>'
;
html
+=
'<div class="part">'
+ entry
[
'part'
]
+
'</div>'
;
html
+=
'<div class="definition">'
;
html
+= entry
[
'definition'
]
;
if
(entry
[
'quote'
]
)
{
html
+=
'<div class="quote">'
;
$.
each
(entry
[
'quote'
]
,
function
(lineIndex
, line
)
{
html
+=
'<div class="quote-line">'
+ line
+
'</div>'
;
}
)
;
if
(entry
[
'author'
]
)
{
html
+=
'<div class="quote-author">'
+ entry
[
'author'
]
+
'</div>'
;
}
html
+=
'</div>'
;
}
html
+=
'</div>'
;
html
+=
'</div>'
;
// id为dictionary里放入html
$
(
'#dictionary'
).
append
(html
)
;
}
)
;
}
)
;
}
)
;
}
)
;
getScript()与ajax请求实战:
点击字母”C”下面的按钮我们来用getScript()的方式从c.js中加载以“字母C”开头的单词
<div class="letter" id="letter-c">
<h3>C
</h3>
<div class="button">Load
</div>
</div>
<!-- 用css文件定义id为loading的div的样式为display:none -->
<div id="loading">
Loading...
</div>
<div id="dictionary">
</div>
c.js文件的内容
// 定义entries 数组
var entries
=
[
{
"term"
:
"CALAMITY"
,
"part"
:
"n."
,
"definition"
:
"A more than commonly plain and unmistakable reminder that the affairs of this life are not of our own ordering. Calamities are of two kinds: misfortune to ourselves, and good fortune to others."
}
,
{
"term"
:
"CANNIBAL"
,
"part"
:
"n."
,
"definition"
:
"A gastronome of the old school who preserves the simple tastes and adheres to the natural diet of the pre-pork period."
}
]
// 拼显示的内容
var html
=
''
;
$.
each
(entries
,
function
(
)
{
html
+=
'<div class="entry">'
;
html
+=
'<h3 class="term">'
+
this
[
'term'
]
+
'</h3>'
;
html
+=
'<div class="part">'
+
this
[
'part'
]
+
'</div>'
;
html
+=
'<div class="definition">'
+
this
[
'definition'
]
+
'</div>'
;
html
+=
'</div>'
;
}
)
;
// id为dictionary的innerHTML改为html
$
(
'#dictionary'
).
html
(html
)
;
$
(document
).
ready
(
function
(
)
{
// 点击字母C下面的按钮,用getScript函数请求c.js文件
$
(
'#letter-c .button'
).
click
(
function
(
)
{
$.
getScript
(
'c.js'
)
;
}
)
;
}
)
;