jQuery AJAX load() 方法

jQuery load() 方法

jQuery load() 方法是一种简单但功能强大的 AJAX 方法。

load() 方法从服务器加载数据，并将返回的数据放入所选元素。

语法:

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

所需的 URL 参数指定要加载的 URL。

可选数据参数指定一组查询字符串键/值对，以便与请求一起发送。

可选 callback 回调参数是 load() 方法完成后要执行的函数的名称。

下面是我们实例文件的内容: "demo.txt":

<p id="p1">武汉地处江汉平原东部、长江中游，长江及其最大支流汉江在城中交汇，形成武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局，市内江河纵横、湖港交织，水域面积占全市总面积四分之一。</p>
<p id="p2">作为中国经济地理中心，武汉有“九省通衢”之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。</p>

下面的实例将文件 "demo.txt" 的内容加载到特定的 <div> 元素中:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/example/ajax/demo.txt");
  });
});
</script>
</head>
<body>
<div id="div1"><h2>让 jQuery AJAX 来改变这段文本</h2></div>
<button>获取外部文本</button>
</body>
</html>

运行一下

还可以向 URL 参数添加 jQuery 选择器。

下面的实例将文件 "demo.txt" 中 id="p1" 的元素内容加载到特定的 <div> 元素中:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/example/ajax/demo.txt #p1");
  });
});
</script>
</head>
<body>
<div id="div1"><h2>让 jQuery AJAX 来改变这段文本</h2></div>
<button>获取外部文本</button>
</body>
</html>

运行一下

可选的 callback 参数指定在 load() 方法完成时运行的回调函数。回调函数可以有不同的参数：

ResponseText - 如果调用成功，则包含结果内容
statusTxt - 包含调用状态
xhr - 包含 XMLHttpRequest 对象

下面的实例在 load() 方法完成后显示一个警示框。如果 load() 方法已成功，则会显示 "外部内容加载成功！"，如果失败，它会显示一条错误消息:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/example/ajax/demo.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>

运行一下

jQuery AJAX 参考

有关所有 jQuery AJAX 方法的完整概述，请访问本站的 jQuery AJAX 参考

jQuery AJAX load() 方法

jQuery load() 方法

语法:

实例

实例

实例

jQuery AJAX 参考

分类导航