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

所属分类: 网络编程 / JavaScript 阅读数: 1354
收藏 0 赞 0 分享

本文实例讲述了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://www.jb51.net/" />
<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://www.jb51.net/" />
<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程序设计有所帮助。

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多