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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
Javascript 面向对象 重载
May 13 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
JavaScript回调函数callback用法解析
Jan 14 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 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
vue与django集成打包的实现方法
2019/11/11 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python实现的生成word文档功能示例
2019/08/23 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
汽车质检员岗位职责
2015/04/08 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
golang 实现并发求和
2021/05/08 Golang
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers