详解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判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
分享PHP守护进程类
2015/12/30 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP简单遍历对象示例
2016/09/28 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
深入浅析python定时杀进程
2016/06/06 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
flask-restful使用总结
2018/12/04 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python递归下载文件夹下所有文件
2019/08/31 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
python logging模块的使用
2020/09/07 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
三字经教学反思
2014/04/26 职场文书
村容村貌整治方案
2014/05/21 职场文书
绿色环保倡议书
2015/04/28 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
js 实现验证码输入框示例详解
2022/09/23 Javascript