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 09 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery实现简单轮播图效果
Dec 27 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/10/23 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python线程池threadpool实现篇
2018/04/27 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python使用knn实现特征向量分类
2018/12/26 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python调用c++传递数组的实例
2019/02/13 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
python opencv肤色检测的实现示例
2020/12/21 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
新年团拜会主持词
2014/04/02 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
基层党支部整改方案
2014/10/25 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang