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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
python3字符串输出常见面试题总结
2020/12/01 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
详解Python魔法方法之描述符类
2021/05/26 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS