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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery实现图片轮播器
May 23 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
html中两种获取标签内的值的方法
Jun 16 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 MYSQL 数据备份类
2009/06/19 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
python的id()函数解密过程
2012/12/25 Python
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Windows下安装Scrapy
2018/10/17 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
如何使用PHP session
2015/04/21 面试题
教师的实习自我鉴定
2013/12/17 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2015年班组长工作总结
2015/04/10 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
运动会宣传稿50字
2015/07/23 职场文书
小学班长竞选稿
2015/11/20 职场文书
高中美术教学反思
2016/02/17 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书