jQuery getJSON()函数及getScript()函数

看这俩函数名，我们都知道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');
  });
});

• getJSON()演示
• getScript()演示