文档章节

jQuery load() 方法实现加载远程数据

前端老手
 前端老手
发布于 09/22 17:43
字数 483
阅读 17
收藏 0

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:
$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件("demo_test.txt")的内容:

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
下面的这句话会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

•responseTxt - 包含调用成功时的结果内容
•statusTXT - 包含调用的状态
•xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:

完整的例子

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

本文转载自:https://www.mk2048.com/blog/blog.php?id=2bkaa2bib

前端老手
粉丝 10
博文 621
码字总数 0
作品 0
卢湾
技术主管
私信 提问
Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统...

长平狐
2012/11/12
346
0
Ajax中的load()方法实现指定区域加载或刷新html与jsp

梳理知识方法的时候,笔者还是有数的,就不闲扯了。 一、Jquery中的Ajax Jquery对Ajax操作进行了封装,在Jquery中: 最底层的是$.ajsx(), 第二层是load()、$.get()、$.post() 第三层是$.getJS...

Red_Ant_hoyl
2018/08/26
0
0
jQuery AJAX 函数详解与实例应用

什么是 AJAX? AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术。 AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载...

Adam-Lee
2011/06/30
4.1K
1
Jquery工作常用实例——使用$.post,$.get,$.ajax使网页进行异步更新

AJAX = Asynchronous JavaScript and XML.,是一种创建快速动态网页的技术。 AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,...

Adam-Lee
2011/07/16
1K
1
JQuery AJAX 方法总结:

JQuery中主要AJax方法: 一、load: $(selector).load(url,[data],[callback]);从服务器中加载数据并将返回数据放入被选元素中。 参数含义: url : 为希望加载URL,可以将JQuery的选择器添加...

wait106427
2015/08/10
289
0

没有更多内容

加载失败,请刷新页面

加载更多

html之表单

本文转载于:专业的前端网站➞html之表单 表单作用:搜集信息; 组成:提示信息、表单控件、表单线 <form action="1.php" method="post" maxlength="6(最大长度)" readonly="readonly(只读,......

前端老手
20分钟前
7
0
Mybatis之Executor

mybatis-3.4.6.release. 图1 Executor是个接口,具体实现是在BaseExecutor和4个子类中。 1.BatchExecutor BatchExecutor与其它的区别是update方法中,使用的是StatementHandler的batch方法,...

克虏伯
38分钟前
6
0
mysql清空表数据并让自增ID从1开始计数

1 使用truncate命令清空表 Truncate Table test truncate 命令速度比delete的删除更快,而且自动将自增字段重新从1计数 2 pypAmyAdmin中操作选项卡(Operations)中进行修改 ps. 网上一些alt...

编程老陆
46分钟前
6
0
58. 静态工厂方法

参考:https://www.jianshu.com/p/ceb5ec8f1174 https://www.jianshu.com/p/fa15f63d399a 1.定义 用一个静态方法来对外提供自身实例的方法,即为我们所说的静态工厂方法(Static factory met...

20190513
52分钟前
10
0
遇到API安全问题怎么办?F5 API加固解决方案怎么样?

  在各种APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优在以前都采用自已定义的接口和结构,对于公开访问的接口,专业点的都会做...

梅丽莎好
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部