J 例

Ajax リクエストを使用して JSON データを取得し、結(jié)果を出力します。

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

E

定義と使用法

HTTP GET リクエストを通じて JSON データをロードします。

jQuery 1.2 では、「myurl?callback=?」などの JSONP 形式の

コールバック関數(shù)

を使用して、他のドメインから JSON データをロードできます。 jQuery は、コールバック関數(shù)を?qū)g行するために、? を正しい関數(shù)名に自動(dòng)的に置き換えます。 注: この行以降のコードは、このコールバック関數(shù)が実行される前に実行されます。

構(gòu)文

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

パラメータ説明

url必須。リクエストの送信先となる URL を指定します。 はオプションです。リクエストとともにサーバーに送信されるデータを指定します。 追加パラメータ: response

データ
success(data,status,xhr)	オプション。リクエストが成功したときに実行する関數(shù)を指定します。
	- リクエストからの結(jié)果データが含まれます status - リクエストのステータスが含まれます xhr - XMLHttpRequest オブジェクトが含まれます

詳細(xì)說(shuō)明

該函數(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">通過(guò) AJAX 請(qǐng)求來(lái)獲得并運(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() 方法通過(guò) HTTP GET 請(qǐng)求載入并執(zhí)行 JavaScript 文件。

語(yǔ)法

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

參數(shù)	描述
url	將要請(qǐng)求的 URL 字符串。
success(response,status)	可選。規(guī)定請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)。 額外的參數(shù)： response?- 包含來(lái)自請(qǐng)求的結(jié)果數(shù)據(jù) status?- 包含請(qǐng)求的狀態(tài)（"success", "notmodified", "error", "timeout" 或 "parsererror"）

詳細(xì)說(shuō)明

該函數(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>");

通過(guò)引用該文件名，就可以載入并運(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í)行腳本。如果通過(guò) 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)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。