Example

Use AJAX request to obtain JSON data and output the result:

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

Definition and Usage

Load JSON data via HTTP GET request.

In jQuery 1.2, you can load JSON data from other domains by using a callback function in JSONP form, such as "myurl?callback=?". jQuery will automatically replace ? with the correct function name to execute the callback function. Note: The code after this line will be executed before this callback function is executed.

Syntax

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

詳細說明

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

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

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

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

示例

從 test.js 載入 JSON 數(shù)據(jù)并顯示 JSON 數(shù)據(jù)中一個 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ù)中一個 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">實例</h2><p style="margin-top:12px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:18px">通過 AJAX 請求來獲得并運行一個 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 請求載入并執(zhí)行 JavaScript 文件。

語法

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

詳細說明

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

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

這里的回調(diào)函數(shù)會傳入返回的 JavaScript 文件。這通常不怎么有用，因為那時腳本已經(jīng)運行了。

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

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

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

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

$.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 加入腳本，請加入延時函數(shù)。

例子 1

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

$.getScript("test.js");

例子 2

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

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

例子 3

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

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);
??});
});

The above is the detailed content of jQuery ajax - getScript() method and getJSON method. For more information, please follow other related articles on the PHP Chinese website!