實(shí)例

#使用AJAX 請(qǐng)求來獲得JSON 數(shù)據(jù)，並輸出結(jié)果：

$("button").click(function(){
??$.getJSON("demo_ajax_json.js",function(result){
????$.each(result,?function(i,?field){
??????$("p").append(field?+?"?");
????});
??});
});

定義與用法

透過HTTP GET 請(qǐng)求載入JSON 資料。

在 jQuery 1.2 中，您可以透過使用 JSONP 形式的回呼函數(shù)來載入其他網(wǎng)域的 JSON 數(shù)據(jù)，如 "myurl?callback=?"。 jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回呼函數(shù)。 注意：此行以後的程式碼將在這個(gè)回呼函數(shù)執(zhí)行前執(zhí)行。

語法

jQuery.getJSON(url,data,success(data,status,xhr))

詳細(xì)說明

該函數(shù)是簡(jiǎn)寫的 Ajax 函數(shù)，等價(jià)于：

$.ajax({
??url:?url,
??data:?data,
??success:?callback,
??dataType:?json
});

發(fā)送到服務(wù)器的數(shù)據(jù)可作為查詢字符串附加到 URL 之后。如果?data?參數(shù)的值是對(duì)象（映射），那么在附加到 URL 之前將轉(zhuǎn)換為字符串，并進(jìn)行 URL 編碼。

傳遞給?callback?的返回?cái)?shù)據(jù)，可以是 JavaScript 對(duì)象，或以 JSON 結(jié)構(gòu)定義的數(shù)組，并使用 $.parseJSON() 方法進(jìn)行解析。

示例

從 test.js 載入 JSON 數(shù)據(jù)并顯示 JSON 數(shù)據(jù)中一個(gè) name 字段數(shù)據(jù)：

$.getJSON("test.js",?function(json){
??alert("JSON?Data:?"?+?json.users[3].name);
});

例子 1

從 Flickr JSONP API 載入 4 張最新的關(guān)于貓的圖片：

HTML 代碼：

<p id="images"></p>

jQuery 代碼：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?",?function(data){
??$.each(data.items,?function(i,item){
????$("<img/>").attr("src",?item.media.m).appendTo("#images");
????if?(?i?==?3?)?return?false;
??});
});

例子 2

從 test.js 載入 JSON 數(shù)據(jù)，附加參數(shù)，顯示 JSON 數(shù)據(jù)中一個(gè) name 字段數(shù)據(jù)：

$.getJSON("test.js",?{?name:?"John",?time:?"2pm"?},?function(json){
??alert("JSON?Data:?"?+?json.users[3].name);
});

<h1 style="margin:15px 0px 0px 15px; padding:0px; border:0px; font-family:微軟雅黑; font-size:26px; font-weight:400; background-color:rgb(249,249,249)">jQuery ajax - getScript() 方法</h1><p style="margin:0px 0px 0px 15px; padding:20px 0px; border-width:1px 0px; border-top-style:solid; border-bottom-style:solid; border-top-color:rgb(170,170,170); border-bottom-color:rgb(170,170,170); width:710px; font-family:Verdana,Arial,宋體; background-color:rgb(249,249,249)"><br></p><h2 style="margin:0px; padding:0px; border:0px; font-family:微軟雅黑; font-size:14px">實(shí)例</h2><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px">通過 AJAX 請(qǐng)求來獲得并運(yùn)行一個(gè) JavaScript 文件：</p><pre style="margin-top:10px; margin-bottom:0px; padding:10px; border:1px dotted rgb(119,136,85); font-family:'Courier New',Courier,monospace; width:620px; background-color:rgb(245,245,245)">$("button").click(function(){
??$.getScript("demo_ajax_script.js");
});

定義和用法

getScript() 方法通過 HTTP GET 請(qǐng)求載入并執(zhí)行 JavaScript 文件。

語法

jQuery.getScript(url,success(response,status))

詳細(xì)說明

該函數(shù)是簡(jiǎn)寫的 Ajax 函數(shù)，等價(jià)于：

$.ajax({
??url:?url,
??dataType:?"script",
??success:?success});

這里的回調(diào)函數(shù)會(huì)傳入返回的 JavaScript 文件。這通常不怎么有用，因?yàn)槟菚r(shí)腳本已經(jīng)運(yùn)行了。

載入的腳本在全局環(huán)境中執(zhí)行，因此能夠引用其他變量，并使用 jQuery 函數(shù)。

比如加載一個(gè) test.js 文件，里邊包含下面這段代碼：

$(".result").html("<p>Lorem?ipsum?dolor?sit?amet.</p>");

通過引用該文件名，就可以載入并運(yùn)行這段腳本：

$.getScript("ajax/test.js",?function()?{
??alert("Load?was?performed.");
});

注釋：jQuery 1.2 版本之前，getScript 只能調(diào)用同域 JS 文件。 1.2中，您可以跨域調(diào)用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過 getScript 加入腳本，請(qǐng)加入延時(shí)函數(shù)。

例子 1

加載并執(zhí)行 test.js：

$.getScript("test.js");

例子 2

加載并執(zhí)行 test.js ，成功后顯示信息：

$.getScript("test.js",?function(){
??alert("Script?loaded?and?executed.");
});

例子 3

載入?jQuery 官方顏色動(dòng)畫插件?成功后綁定顏色變化動(dòng)畫：

HTML 代碼：

<button id="go">Run</button>
<p class="block"></p>

jQuery 代碼：

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
?function(){
??$("#go").click(function(){
????$(".block").animate(?{?backgroundColor:?'pink'?},?1000)
??????.animate(?{?backgroundColor:?'blue'?},?1000);
??});
});

以上是jQuery ajax - getScript() 方法和getJSON方法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！