jQuery ajax - getScript() method and getJSON method

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))

Parameters	Description
url	Required. Specifies the URL to which the request will be sent.
data	Optional. Specifies the data to be sent to the server with the request.
success(data,status,xhr)	Optional. Specifies a function to run when the request is successful. Extra parameters: ##response - Contains the result data from the request status - Contains the status of the request xhr - Contains XMLHttpRequest Object

详细说明

该函数是简写的 Ajax 函数，等价于：

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

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。

传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。

示例

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据：

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

例子 1

从 Flickr JSONP API 载入 4 张最新的关于猫的图片：

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 数据，附加参数，显示 JSON 数据中一个 name 字段数据：

$.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 请求载入并执行 JavaScript 文件。

语法

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

参数	描述
url	将要请求的 URL 字符串。
success(response,status)	可选。规定请求成功后执行的回调函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

详细说明

该函数是简写的 Ajax 函数，等价于：

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

这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用，因为那时脚本已经运行了。

载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。

比如加载一个 test.js 文件，里边包含下面这段代码：

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

通过引用该文件名，就可以载入并运行这段脚本：

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

注释：jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

例子 1

加载并执行 test.js：

$.getScript("test.js");

例子 2

加载并执行 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!