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

2024-04-22 05:53:55

加载 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 文档内的格式错误，虽然不会报错，但是将无法执行回调函数。

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

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

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

复制代码代码如下: $(document).ready(function(){ $.ajax({ type:"get", cache:false, url:"ajaxpage.aspx?t=getcity", dataType:"json", beforeSend:function(){ $("#vvv").append('&l
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
php+ajax实现无刷新动态加载数据技术

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

请求数据我们可以使用 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操作篇（三） - 过程处理

观察函数 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学习笔记之代码分割和按需加载的实例详解,分享给大家,也给自己留个笔记为什么需要代码分割和按需加载代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 举个简单的例子: 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版的.因为是个人操

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

相关推荐

随机推荐