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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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学习之数组值的操作
2011/04/17 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Django 再谈一谈json序列化
2020/03/16 Python
详解Python 中的容器 collections
2020/08/17 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
科学育儿宣传标语
2014/10/08 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
学生逃课检讨书
2015/02/17 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
MySQL 如何设计统计数据表
2021/06/15 MySQL
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers