jQuery学习笔记之 Ajax操作篇(一) - 数据加载


Posted in Javascript onJune 23, 2014

加载 HTML

我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为:

<div></div>
<button>load</button>

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

同目录下的 test.html 文件内容为:

<span>test</span>

我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上:

$('button').click(function() {
  $('div').load('test.html');
 });

点击按钮后:

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

加载 JSON

JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示和传输数据,它规定键和值都必须包含在双引号内,且函数为非法 JSON 值。

{
  "name": "stephenlee", 
  "sex": "male"
}

将上述 JSON 数据保存在 test.json 文件内。我们可以使用 getJSON 方法加载 JSON 数据,同样将其绑定在按钮的点击事件上:

$('button').click(function() {
  $.getJSON('test.json');
 });

由于 getJSON 方法是作为 jQuery 的全局对象而定义的,因此这里需要使用 $ 来调用该方法。这里的 $ 指的是全局 jQuery 对象,而不是 $() 所指的个别 jQuery 对象。因此我们也称 getJSON 函数为全局函数。
但我们会发现上述代码只是获取了 JSON 数据,但看不出任何效果,这里我们可以使用 getJSON 方法的第二参数作为回调函数来测试效果:

$('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

点击按钮后,我们来看下 console 内的输出:

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

这里的 each 函数的第一个参数可以接收数组或对象,第二个参数为值回调函数,将每次循环中数组或对象的当前索引和值做为参数。

加载 JS

有时候我们不希望在页面初次加载时就加载所有的 JS 文件,而是动态地根据需求来加载,假设当前目录下有一个 JS 文件,内容为一个简单的 alert:

$(function() {
 alert('test');//
})

我们可以使用全局函数 getScript 来加载该文件,同样绑定到按钮的点击事件上:

$('button').click(function() {
  $.getScript('test.js');
 });

点击按钮后,加载 test.js 文件,并成功触发 alert。

加载 XML

对 XML 的加载操作与 JSON 类似,因为 XML 文档的作用也是与数据存储相关,在同目录下创建 text.xml 文件,内容为:

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

加载 XML 文档可以直接使用 get 方法,为什么看上去像一个默认方法,这个可以根据 AJAX 的全称看出端倪 - Asynchronous JavaScript And XML。
同样将其绑定在按钮点击事件上:

$('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

查看 console 结果为:

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

这里需要注意,如果 XML 文档内的格式错误,虽然不会报错,但是将无法执行回调函数。

Javascript 相关文章推荐
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
js验证框架实现代码分享
May 18 Javascript
jquery插件格式实例分析
Jun 16 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 #Javascript
yepnope.js使用详解及示例分享
Jun 23 #Javascript
js的延迟执行问题分析
Jun 23 #Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 #Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 #Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 #Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
You might like
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
DISCUZ 分页代码
2007/01/02 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
扩展String功能方法
2006/09/22 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Python字符串格式化输出方法分析
2016/04/13 Python
python numpy元素的区间查找方法
2018/11/14 Python
python selenium操作cookie的实现
2020/03/18 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android