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

加载 HTML

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

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

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

<span>test</span>

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

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

点击按钮后：

加载 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 内的输出：

这里的 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 结果为：

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

赞 (0)

相关推荐

  • 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

    滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).h

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • 基于jquery的finkyUI插件与Ajax实现页面数据加载功能

    基于jquery的finkyUI插件与Ajax实现页面数据加载功能

    复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <script type="text/javascript" src="js/jquer

  • Ajax动态加载数据库示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • 使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    使用加载图片解决在Ajax数据加载中页面出现短暂空白的问题(推荐)

    在项目中用ajax异步获取数据后有时会因为数据问题或者网络问题,页面一直显示空白,现在用加载图片来过渡这种状态: <script> $(function(){ $.ajax({ url:'',//提供接口的文件地址链接 dataType:'json', type:'POST', beforeSend: function(){ $('#loading').html("<img src=\"images/loading.gif\" width=\"15

  • jquery Ajax 实现加载数据前动画效果的示例代码

    复制代码 代码如下: $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        url:"ajaxpage.aspx?t=getcity",        dataType:"json",        beforeSend:function(){           $("#vvv").append('&l

  • jQuery学习笔记之 Ajax操作篇（一） - 数据加载

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

    加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: <div></div> <button>load</button> 同目录下的 test.html 文件内容为: <span>test</span> 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $('button').click(function() { $('div').load('test.

  • jQuery学习笔记之 Ajax操作篇（二） - 数据传递

    jQuery学习笔记之 Ajax操作篇（二） - 数据传递

    请求数据 我们可以使用 GET.POST 两种方式向后端请求数据,这里以 PHP 为例,假设有测试页面 age.php,用于返回年龄信息,内容为: if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') { echo '23'; } 当前页面内容为: <div> <a href="age.php">stephen</a> <span>age : <

  • jQuery学习笔记之 Ajax操作篇（三） - 过程处理

    jQuery学习笔记之 Ajax操作篇（三） - 过程处理

    观察函数 ajaxStart 和 ajaxStop 函数可以用来作为观察函数,我们可以使用观察函数的回调函数来做相应的处理. 当 Ajax 请求开始且尚未进行其他传输时,会触发 ajaxStart 的回调函数. 当最后一次活动请求终止时,则会执行通过 ajaxStop 注册的回调函数. 由于观察函数具备全局性,所以需要使用 $(document) 来调用.我们通过使用 Ajax 方法取得一个图片的例子来测试两个函数: 当前页面为: <div></div> <button>

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • webpack学习笔记之代码分割和按需加载的实例详解

    webpack学习笔记之代码分割和按需加载的实例详解

    本文介绍了webpack学习笔记之代码分割和按需加载的实例详解,分享给大家,也给自己留个笔记 为什么需要代码分割和按需加载 代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 举个简单的例子: 1.一个HTML中存在一个按钮 2.点击按钮出现一个包着图片的div 3.点击关闭按钮图片消失 Demo目录: 一.当未点击按钮时浏览器只加载了对入口文件打包后的js 二.点击按钮会对组件进行异步加载 这个clichunk就是我们打包好的click组件,包括相应的JS逻

  • C#使用Jquery zTree实现树状结构显示 异步数据加载

    C#使用Jquery zTree实现树状结构显示_异步数据加载 JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/demo.php#_101 关于zTree的详细解释请看演示页面,还有zTree帮助Demo. 下面简要讲解下本人用到的其中一个实例(直接上关键代码了): 异步加载节点数据: A-前台: <link href="zTree_v3-mas

  • jQuery学习心得总结(必看篇)

    jQuery 对象 •jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象. •jQuery 对象是 jQuery 独有的. •只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法. •约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $ •jQuery 对象中封装了多个 DOM 对象,同时 jQuery 对象是类数组对象 •数组与类数组对象的区别

  • JavaWeb学习笔记分享(必看篇)

    自定义列表 <dl></dl>:表示列表的范围 **在里面 <dt></dt>:上层内容 **在里面 <dd></dd>:下层内容 有序列表 <ol></ol>:有序列表的范围 --属性 type:设置排序方式,1(默认),a,i.. **在ol标签里面 <li>具体内容</li> 无序列表 <ul></ul>:无序列表的范围 --属性 type:circle(空

  • Javascript基础学习笔记(菜鸟必看篇)

    什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

  • Ext第一周 史上最强学习笔记---GridPanel（基础篇）

    如果你想实现什么特效,这个文字不适合你,但如果你想Ext文章,我想鄙人的小文非常适合你. 另:这篇教程是建立在Ext2.2上的.这个很多教程都没说明.让人很糊涂.我在此特别说明 网上很多教程,但是实际使用并不是很多,我想作为一个星期一个星期的总结来给各位网络上的朋友带来帮助.希望各位有用.我会从每个细节都说明,尽量不漏掉作为初学者需要知道的基础知识.第一次写教程,见笑了. 因为我学这个是这样一个过程,通过一个控件了解其他的控件,剩下的就是属性查API了.API我自己在翻译CHM版的.因为是个人操

随机推荐