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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue之延时刷新实例
Nov 14 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
PHP学习 运算符与运算符优先级
2008/06/15 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python模拟斗地主发牌
2020/04/22 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
坚定理想信念心得体会
2014/03/11 职场文书
国培计划培训感言
2014/03/11 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
运动会通讯稿200字
2015/07/20 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
python 详解turtle画爱心代码
2022/02/15 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang