jQuery學習筆記之 Ajax操作篇(一) - 數(shù)據(jù)加載
加載 HTML
我們通常使用加載 HTML 的方法來加載 HTML 片段,并插入到指定位置,假設當前頁面為:
<div></div> <button>load</button>
同目錄下的 test.html 文件內(nèi)容為:
<span>test</span>
我們可以使用 load 方法來加載 HTML,將其綁定到按鈕的點擊事件上:
$('button').click(function() { $('div').load('test.html'); });
點擊按鈕后:
加載 JSON
JSON 即 Javascript Object Notation,直譯過來即 Javascript 對象表示法,因此它能很方便地表示和傳輸數(shù)據(jù),它規(guī)定鍵和值都必須包含在雙引號內(nèi),且函數(shù)為非法 JSON 值。
{ "name": "stephenlee", "sex": "male" }
將上述 JSON 數(shù)據(jù)保存在 test.json 文件內(nèi)。我們可以使用 getJSON 方法加載 JSON 數(shù)據(jù),同樣將其綁定在按鈕的點擊事件上:
$('button').click(function() { $.getJSON('test.json'); });
由于 getJSON 方法是作為 jQuery 的全局對象而定義的,因此這里需要使用 $ 來調(diào)用該方法。這里的 $ 指的是全局 jQuery 對象,而不是 $() 所指的個別 jQuery 對象。因此我們也稱 getJSON 函數(shù)為全局函數(shù)。
但我們會發(fā)現(xiàn)上述代碼只是獲取了 JSON 數(shù)據(jù),但看不出任何效果,這里我們可以使用 getJSON 方法的第二參數(shù)作為回調(diào)函數(shù)來測試效果:
$('button').click(function() { $.getJSON('test.json', function(data) { console.log(data); $.each(data, function(index, content) { console.log(content); }) }); });
點擊按鈕后,我們來看下 console 內(nèi)的輸出:
這里的 each 函數(shù)的第一個參數(shù)可以接收數(shù)組或?qū)ο螅诙€參數(shù)為值回調(diào)函數(shù),將每次循環(huán)中數(shù)組或?qū)ο蟮漠斍八饕椭底鰹閰?shù)。
加載 JS
有時候我們不希望在頁面初次加載時就加載所有的 JS 文件,而是動態(tài)地根據(jù)需求來加載,假設當前目錄下有一個 JS 文件,內(nèi)容為一個簡單的 alert:
$(function() { alert('test');// })
我們可以使用全局函數(shù) getScript 來加載該文件,同樣綁定到按鈕的點擊事件上:
$('button').click(function() { $.getScript('test.js'); });
點擊按鈕后,加載 test.js 文件,并成功觸發(fā) alert。
加載 XML
對 XML 的加載操作與 JSON 類似,因為 XML 文檔的作用也是與數(shù)據(jù)存儲相關(guān),在同目錄下創(chuàng)建 text.xml 文件,內(nèi)容為:
<person> <name>stephenlee</name> <sex>male</sex> </person>
加載 XML 文檔可以直接使用 get 方法,為什么看上去像一個默認方法,這個可以根據(jù) AJAX 的全稱看出端倪 - Asynchronous JavaScript And XML。
同樣將其綁定在按鈕點擊事件上:
$('button').click(function() { $.get('test.xml', function(data) { console.log(data); }); });
查看 console 結(jié)果為:
這里需要注意,如果 XML 文檔內(nèi)的格式錯誤,雖然不會報錯,但是將無法執(zhí)行回調(diào)函數(shù)。
相關(guān)文章
Jquery attr("checked") 返回checked或undefined 獲取選中失效
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原來的true和false了,有關(guān)此問題的解決方法如下,感興趣的朋友可以參考下2013-10-10基于jquery的9行js輕松實現(xiàn)tab控件示例
tab控件的實現(xiàn)方法有很多,在本文為大家詳細介紹下如何通過9行js實現(xiàn)簡單的tab控件,感興趣的朋友不要錯過2013-10-10分享10篇優(yōu)秀的jQuery幻燈片制作教程及應用案例
jQuery 是一個非常優(yōu)秀的 JavaScript 框架,使用簡單靈活,同時還有許多成熟的插件可供選擇,它可以幫助你在項目中加入一些非常好的效果。2011-04-04jquery.cvtooltip.js 基于jquery的氣泡提示插件
顯示氣泡提示的前提是,一定會有一個被提示的對象,默認的位置是根據(jù)body來計算的,這樣的壞處就是如果頁面內(nèi)容發(fā)生了變化,而氣泡的位置沒有改變,導致提示目的失敗。2010-11-11淺析jquery數(shù)組刪除指定元素的方法:grep()
下面小編就為大家?guī)硪黄獪\析jquery數(shù)組刪除指定元素的方法:grep()。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05