jQuery - AJAX load() 实例用法详解


Posted in jQuery onAugust 27, 2019

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件("demo_test.txt")的内容:

<h2>jQuery AJAX 是个非常棒的功能!</h2> <p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:

实例

$("#div1").load("demo_test.txt");

尝试一下 »

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

实例

$("#div1").load("demo_test.txt #p1");

尝试一下 »
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:

实例

$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });

感谢大家的阅读和对三水点靠木的支持。

jQuery 相关文章推荐
jQuery插件之validation插件
Mar 29 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
You might like
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
通过C++学习Python
2015/01/20 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python读取并写入mat文件的方法
2019/07/12 Python
python科学计算之narray对象用法
2019/11/25 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
董事长职责范文
2013/11/08 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
门店业绩提升方案
2014/06/08 职场文书
欢迎家长标语
2014/10/08 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2014年保管员工作总结
2014/11/18 职场文书
个人合作协议范本
2015/08/06 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
css3应用示例:新增的选择器
2022/03/16 HTML / CSS