jQuery中ajax的load()方法用法实例


Posted in Javascript onDecember 26, 2014

本文实例讲述了jQuery中ajax的load()方法用法。分享给大家供大家参考。具体分析如下:

此函数jQuery中简单而功能强大的ajax方法。
它可以从服务器加载内容,然后写入匹配元素。
语法结构:

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

参数解析:

1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中。
2.URL:必须,需要加载的一个url地址。
3.data:可选,与请求一同发送的查询字符串键/值对集合。
4.callback:可选,load()函数执行完毕后要执行的函数,也即是一个回调函数。

代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){

  $("#bt").click(function(){

    $("#thediv").load("mytest/demo/antzone.txt");

  })

})

</script>

</head>

<body>

<div id="thediv"></div>

<input type="button" value="查看效果" id="bt"/>

</body>

</html>

以上代码实现了我们的要求,可以将文本文件中的内容写入div元素中。

callback回调函数:

回调函数可以具有三个参数,下面介绍一下三个参数的作用:

1.responseTxt:包含调用成功时的结果内容。
2.statusTXT:包含调用的状态。
3.xhr:XMLHttpRequest对象。

代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){

  $("#bt").click(function(){

    $("#thediv").load("antzone.txt",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success"){

        alert("内容加载成功!");

      }  

      if(statusTxt=="error"){

        alert("错误:"+xhr.status+":"+xhr.statusText);

      }  

    });

  });

})

</script>

</head>

<body>

<div id="thediv"></div>

<input type="button" value="查看效果" id="bt"/>

</body>

</html>

以上代码实现可以弹出错误提示,因为路径不正确,找不到文件。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Node批量爬取头条视频并保存方法
Sep 20 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 #Javascript
jQuery中change事件用法实例
Dec 26 #Javascript
jQuery中mouseover事件用法实例
Dec 26 #Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 #Javascript
Angularjs 基础入门
Dec 26 #Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 #Javascript
Javascript的闭包详解
Dec 26 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
深入了解python中元类的相关知识
2019/08/29 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python callable内置函数原理解析
2020/03/05 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
办公室经理岗位职责
2014/01/01 职场文书
北京奥运会主题口号
2014/06/13 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2015双创工作总结
2015/07/24 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL