详解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 实现导航栏悬停效果
Sep 23 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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 获得汉字拼音首字母的函数
2009/08/01 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php实现网页端验证码功能
2017/07/11 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JSON相关知识汇总
2015/07/03 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python Tensor和Array对比分析
2020/01/08 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
小学生暑假感言
2014/02/06 职场文书
青春演讲稿范文
2014/05/08 职场文书
十八大演讲稿
2014/05/22 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js