jQuery 是一个广泛使用的 JavaScript 库，它为开发者提供了许多实用工具和函数，可以大大简化前端页面的开发。其中，load() 方法是一种常用的方式，可以异步加载远程 HTML 文件或服务器端脚本，并将结果插入到当前文档中的指定元素中。在本文中，我们将详细介绍 jQuery 的 load() 方法及其回调函数用法实例，并提供示例代码。
基本语法
load() 方法的基本语法如下：
$(selector).load(url, [data], [callback]);
其中，selector 表示要插入内容的元素选择器；url 表示要加载的远程 HTML 或服务器端脚本的 URL；data 表示向服务器发送的数据，可以是字符串或对象；callback 表示当请求成功时要执行的回调函数。
加载静态文件
我们可以使用 load() 方法来异步加载远程 HTML 文件或静态文本文件，并将结果插入到当前文档中的指定元素中，例如：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------ ------------ ------- ------ ---- ------------------- ------- ----------------------------------------------------------- -------- ------------- ----------------------------------- --------------------- ---------- ----- -------------- -- ---------- --------------------- -------------- -- -------- ---------------- - - ---------- - -- - - ---------------- ---- --- --------- ------- -------
在上面的示例中，我们使用了 load() 方法来异步加载一个名为 example.html 的文件，并将结果插入到 id 为 content 的 div 元素中。当请求成功时，会执行回调函数并弹出一个提示框，表示内容已成功加载。
加载动态内容
我们也可以使用 load() 方法来异步加载服务器端脚本生成的动态内容，并将结果插入到当前文档中的指定元素中。例如，我们可以创建一个 PHP 脚本，用于生成一些随机数，并将其值返回给前端页面：
<?php echo rand(100, 999); ?>
然后，在前端页面中，我们可以使用 load() 方法来异步加载该 PHP 脚本，并将结果插入到指定元素中：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------ ------------ ------- ------ ---- ------------------- ------- ----------------------------------------------------------- -------- ------------- ---------------------------------- --------------------- ---------- ----- -------------- -- ---------- ------------------- - ------------- -------------- -- -------- ---------------- - - ---------- - -- - - ---------------- ---- --- --------- ------- -------
在上面的示例中，我们使用了 load() 方法来异步加载一个名为 example.php 的 PHP 脚本，并将结果插入到 id 为 content 的 div 元素中。当请求成功时，会执行回调函数并弹出一个提示框，显示返回的内容。
回调函数
load() 方法还支持回调函数，可以在请求成功或失败时执行相应的操作。回调函数有三个参数：responseTxt 表示服务器响应的文本内容；statusTxt 表示状态字符串，包含 "success" 或 "error"；xhr 表示 XMLHttpRequest 对象。例如，我们可以使用以下代码将错误信息记录到控制台中：
$(selector).load(url, function(responseTxt, statusTxt, xhr){
if(statusTxt == "error")
console.log("Error: " + xhr.status + ": " + xhr.statusText);
});总结
jQuery 的 load()
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2550