jQuery ajax - getScript() 方法和getJSON方法


Posted in jQuery onMay 14, 2021

实例

使用 AJAX 请求来获得 JSON 数据,并输出结果:

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

 

定义和用法

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。

语法

jQuery.getJSON(url,data,success(data,status,xhr))
参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态
  • xhr - 包含 XMLHttpRequest 对象

详细说明

该函数是简写的 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 代码:

<div id="images"></div>

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

jQuery ajax - getScript() 方法

实例

通过 AJAX 请求来获得并运行一个 JavaScript 文件:

$("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>
<div class="block"></div>

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 相关文章推荐
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jquery插件实现悬浮的菜单
jquery插件实现代码雨特效
Apr 24 #jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
jquery插件实现图片悬浮
jQuery实现影院选座订座效果
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
jQuery treeview树形结构应用
Mar 24 #jQuery
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
javascript常见用法总结
2014/05/22 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python编程求质数实例代码
2018/01/31 Python
python matlibplot绘制3D图形
2018/07/02 Python
Linux下python3.7.0安装教程
2018/07/30 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
基于Python实现扑克牌面试题
2019/12/11 Python
python实现门限回归方式
2020/02/29 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
大学生党课思想汇报
2013/12/29 职场文书
简短大学毕业感言
2014/01/18 职场文书
关于运动会的稿件
2014/02/02 职场文书
给校长的一封建议书
2014/03/12 职场文书
股权投资意向书
2014/04/01 职场文书
建筑管理专业求职信
2014/07/28 职场文书
119消防日活动总结
2014/08/29 职场文书
倡议书范文大全
2015/04/28 职场文书
mysqldump进行数据备份详解
2022/07/15 MySQL