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 相关文章推荐
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
js实现右键自定义菜单
Dec 03 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
为vue项目自动设置请求状态的配置方法
Jun 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php 无限极分类
2008/03/27 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php提交post数组参数实例分析
2015/12/17 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
导游个人求职信范文
2014/03/23 职场文书
请假条范文大全
2014/04/10 职场文书
英文请假条
2014/04/11 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
考察邀请函范文
2015/01/31 职场文书
2016年五一促销广告语
2016/01/28 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技