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插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery实现聊天机器人
Feb 08 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初学者(入门学习经验谈)
2010/10/12 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python编程argparse入门浅析
2018/02/07 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
航空学院求职信
2014/06/11 职场文书
律政俏佳人观后感
2015/06/09 职场文书
中学政教处工作总结
2015/08/13 职场文书
高中化学教学反思
2016/02/22 职场文书
详解Nginx 工作原理
2021/03/31 Servers