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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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分页代码学习示例分享
2014/02/20 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
经验几则 推荐
2006/09/05 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
浅析Python3爬虫登录模拟
2018/02/07 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python argparser的具体使用
2019/11/10 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python 如何实现访问者模式
2020/07/28 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
租房协议书范本
2014/04/09 职场文书