細說 jQuery Ajax操作篇（一） - 數據加載

paulli3 發布于2019-08-21 12:21 / 2895人閱讀

摘要：同樣將其綁定在按鈕點擊事件上查看結果為這里需要注意，如果文檔內的格式錯誤，雖然不會報錯，但是將無法執行回調函數。

Ajax 通俗來講即不需要刷新頁面即可從服務器或客戶端上加載數據，當然這些數據的格式是多種多樣的。

加載 HTML

我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設當前頁面為：

同目錄下的 test.html 文件內容為：

test

我們可以使用 load 方法來加載 HTML，將其綁定到按鈕的點擊事件上：

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

點擊按鈕后：

加載 JSON

JSON 即 Javascript Object Notation，直譯過來即 Javascript 對象表示法，因此它能很方便地表示和傳輸數據，它規定鍵和值都必須包含在雙引號內，且函數為非法 JSON 值。

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

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

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

由于 getJSON 方法是作為 jQuery 的全局對象而定義的，因此這里需要使用 $ 來調用該方法。這里的 $ 指的是全局 jQuery 對象，而不是 $() 所指的個別 jQuery 對象。因此我們也稱 getJSON 函數為全局函數。
但我們會發現上述代碼只是獲取了 JSON 數據，但看不出任何效果，這里我們可以使用 getJSON 方法的第二參數作為回調函數來測試效果：

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

點擊按鈕后，我們來看下 console 內的輸出：

這里的 each 函數的第一個參數可以接收數組或對象，第二個參數為值回調函數，將每次循環中數組或對象的當前索引和值做為參數。

加載 JS

有時候我們不希望在頁面初次加載時就加載所有的 JS 文件,而是動態地根據需求來加載，假設當前目錄下有一個 JS 文件，內容為一個簡單的 alert：

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

我們可以使用全局函數 getScript 來加載該文件，同樣綁定到按鈕的點擊事件上：

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

點擊按鈕后，加載 test.js 文件，并成功觸發 alert。

加載 XML

對 XML 的加載操作與 JSON 類似，因為 XML 文檔的作用也是與數據存儲相關，在同目錄下創建 text.xml 文件，內容為：


stephenlee
male

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

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

查看 console 結果為：

這里需要注意，如果 XML 文檔內的格式錯誤，雖然不會報錯，但是將無法執行回調函數。

參考

http://book.douban.com/subject/24669823/

GPU云服務器云服務器 jquery操作ajax jquery ajax 數據綁定 ajax動態加載數據 ajax異步加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87554.html

細說 jQuery Ajax操作篇（二） - 數據傳遞

摘要：在前一篇介紹的數據加載中的例子都是從靜態的文件中取得數據，而更大的價值在于與后端服務器進行數據傳遞，動態地請求和發送數據。首先用方式請求數據方式點擊標簽后，當前頁面為數據請求成功。在前一篇介紹 jQuery Ajax 的數據加載中的例子都是從靜態的文件中取得數據，而 Ajax 更大的價值在于與后端服務器進行數據傳遞，動態地請求和發送數據。請求數據我們可以使用 GET、POST...

paulli3 2019-08-21 12:21 評論0 收藏0
細說 jQuery Ajax操作篇（三） - 過程處理

摘要：觀察函數和函數可以用來作為觀察函數，我們可以使用觀察函數的回調函數來做相應的處理。當請求開始且尚未進行其他傳輸時，會觸發的回調函數。當最后一次活動請求終止時，則會執行通過注冊的回調函數。對于 jQuery 通過 Ajax 方式傳遞數據時，我們還可以在過程中進行一定的處理，以便達到我們的需求。觀察函數 ajaxStart 和 ajaxStop 函數可以用來作為觀察函數，我們可以使...

Imfan 2019-08-19 14:56 評論0 收藏0
細說 jQuery 插件篇（一） - 添加全局函數

摘要：添加全局函數所謂全局函數就是對象的方法，例如在一篇中介紹的等方法。當我們希望將一些功能性代碼重復使用，可以將其打包成一個 jQuery 插件來使用。使用 $ 別名首先我們在編寫插件時必須保證 jQuery 庫已經載入，但是我們不能保證 $ 一定可用，為了使用 $ 別名，我們可以利用 IIFE （Immediately Invoked Function Expression），...

joyvw 2019-08-19 14:55 評論0 收藏0
細說 jQuery 事件篇（一） - 代碼執行時機

摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動執行代碼，接下來具體介紹下這個機制。這樣看上去貌似沒什么問題，但是如果有兩個函數需要指定時就會遇到麻煩，因為屬性只能保存對一個函數的引用，如果我們寫成以下形式最后代碼執行后的效果是會覆蓋。在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執行代碼，接下來具體介紹下這...

dunizb 2019-08-19 14:51 評論0 收藏0
細說 jQuery 元素篇（二） - 選擇符

摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規范中的所有選擇符。舉例如下： ...

104828720 2019-08-19 14:51 評論0 收藏0