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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
详解jQuery中的prop()使用方法
Jan 05 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里的JS打印函数
2006/10/09 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
拉拉队口号
2014/06/16 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs