详解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现实多行信息
Aug 26 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
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
帅气的琦玉老师
2020/03/02 日漫
php实现aes加密类分享
2014/02/16 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
遗嘱继承公证书
2014/04/09 职场文书
2014公司年终工作总结
2014/12/19 职场文书
民事调解协议书
2016/03/21 职场文书
mysql脏页是什么
2021/07/26 MySQL