详解jQuery中ajax.load()方法


Posted in Javascript onJanuary 25, 2017

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容。

load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式。

因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交。

例如$("#box").load("loadTest.html?name=zhang&age=25")

load()方法可以参数三个参数:

url(必须,请求html 文件的url 地址,参数类型为String)

data(可选,发送的key/value 数据,参数类型为Object)

callback(可选,成功或失败的回调函数,参数类型为函数Function)

load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀。例如$("#box").load()

而$.get()和$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,

而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。

可选的 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中ajax.load()方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
angular2使用简单介绍
Mar 01 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 #Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 #Javascript
js实现文字选中分享功能
Jan 25 #Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 #Javascript
jquery实现拖动效果(代码分享)
Jan 25 #Javascript
angular forEach方法遍历源码解读
Jan 25 #Javascript
three.js实现围绕某物体旋转
Jan 25 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
jQuery实现弹幕特效
2019/11/29 jQuery
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
linux面试相关问题
2013/04/28 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
医学检验专业大学生求职信
2013/11/18 职场文书
写自荐信的注意事项
2014/03/09 职场文书
会议欢迎标语
2014/06/30 职场文书
高中军训的心得体会
2014/09/01 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
老人节主持词
2015/07/04 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS