加載 HTML

我們通常使用加載 HTML 的方法來(lái)加載 HTML 片段，并插入到指定位置，假設(shè)當(dāng)前頁(yè)面為：

<div></div>
<button>load</button>

同目錄下的 test.html 文件內(nèi)容為：

<span>test</span>

我們可以使用 load 方法來(lái)加載 HTML，將其綁定到按鈕的點(diǎn)擊事件上：

 $('button').click(function() {
  $('div').load('test.html');
 });

點(diǎn)擊按鈕后：

加載 JSON

JSON 即 Javascript Object Notation，直譯過(guò)來(lái)即 Javascript 對(duì)象表示法，因此它能很方便地表示和傳輸數(shù)據(jù)，它規(guī)定鍵和值都必須包含在雙引號(hào)內(nèi)，且函數(shù)為非法 JSON 值。

{
  "name": "stephenlee", 
  "sex": "male"
}

將上述 JSON 數(shù)據(jù)保存在 test.json 文件內(nèi)。我們可以使用 getJSON 方法加載 JSON 數(shù)據(jù)，同樣將其綁定在按鈕的點(diǎn)擊事件上：

 $('button').click(function() {
  $.getJSON('test.json');
 });

由于 getJSON 方法是作為 jQuery 的全局對(duì)象而定義的，因此這里需要使用 $ 來(lái)調(diào)用該方法。這里的 $ 指的是全局 jQuery 對(duì)象，而不是 $() 所指的個(gè)別 jQuery 對(duì)象。因此我們也稱 getJSON 函數(shù)為全局函數(shù)。
但我們會(huì)發(fā)現(xiàn)上述代碼只是獲取了 JSON 數(shù)據(jù)，但看不出任何效果，這里我們可以使用 getJSON 方法的第二參數(shù)作為回調(diào)函數(shù)來(lái)測(cè)試效果：

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

點(diǎn)擊按鈕后，我們來(lái)看下 console 內(nèi)的輸出：

這里的 each 函數(shù)的第一個(gè)參數(shù)可以接收數(shù)組或?qū)ο?，第二個(gè)參數(shù)為值回調(diào)函數(shù)，將每次循環(huán)中數(shù)組或?qū)ο蟮漠?dāng)前索引和值做為參數(shù)。

加載 JS

有時(shí)候我們不希望在頁(yè)面初次加載時(shí)就加載所有的 JS 文件,而是動(dòng)態(tài)地根據(jù)需求來(lái)加載，假設(shè)當(dāng)前目錄下有一個(gè) JS 文件，內(nèi)容為一個(gè)簡(jiǎn)單的 alert：

$(function() {
 alert('test');//
})

我們可以使用全局函數(shù) getScript 來(lái)加載該文件，同樣綁定到按鈕的點(diǎn)擊事件上：

 $('button').click(function() {
  $.getScript('test.js');
 });

點(diǎn)擊按鈕后，加載 test.js 文件，并成功觸發(fā) alert。

加載 XML

對(duì) XML 的加載操作與 JSON 類似，因?yàn)?XML 文檔的作用也是與數(shù)據(jù)存儲(chǔ)相關(guān)，在同目錄下創(chuàng)建 text.xml 文件，內(nèi)容為：

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

加載 XML 文檔可以直接使用 get 方法，為什么看上去像一個(gè)默認(rèn)方法，這個(gè)可以根據(jù) AJAX 的全稱看出端倪 - Asynchronous JavaScript And XML。
同樣將其綁定在按鈕點(diǎn)擊事件上：

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

查看 console 結(jié)果為：

這里需要注意，如果 XML 文檔內(nèi)的格式錯(cuò)誤，雖然不會(huì)報(bào)錯(cuò)，但是將無(wú)法執(zhí)行回調(diào)函數(shù)。

最新評(píng)論