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仿微信聊天界面
May 06 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery操作动画完整实例分析
Jan 10 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php进程间通讯实例分析
2016/07/11 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
玩转方法:call和apply
2014/05/08 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
使用python获取电脑的磁盘信息方法
2018/11/01 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python实现KNN分类算法
2019/10/16 Python
如何使用python传入不确定个数参数
2020/02/18 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
高中物理教学反思
2014/02/08 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书