详解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 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
开源SNS系统-ThinkSNS
2008/05/18 PHP
php遍历目录方法小结
2015/03/10 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php7性能提升的原因详解
2019/10/13 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
jquery.validate使用详解
2016/06/02 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
Python的另外几种语言实现
2015/01/29 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python Pillow图像处理方法汇总
2019/10/16 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
教学实验楼管理制度
2014/02/01 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
保送生自荐信
2015/03/06 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
尝试使用Python爬取城市租房信息
2022/04/12 Python