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表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
javascript计算渐变颜色的实例
Sep 22 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Open and Print a Word Document
2007/06/15 Javascript
初学JavaScript第二章
2008/09/30 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
python实现web方式logview的方法
2015/08/10 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python列表(List)知识点总结
2019/02/18 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
大学生求职信
2014/06/17 职场文书
成都人事代理协议书
2014/10/25 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
小班上学期个人总结
2015/02/12 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis