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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
django的autoreload机制实现
2020/06/03 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
python3判断IP地址的方法
2021/03/04 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
建国大业电影观后感
2015/06/01 职场文书
运动会主持词大全
2015/07/02 职场文书
婚礼父母致辞
2015/07/28 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript