jQuery - AJAX load()方法
jQuery load()方法是一种简单但功能强大的AJAX方法。
jQuery load()方法
jQuery load()方法从服务器加载数据,并将返回的HTML放入所选元素中。
此方法提供了一种从Web服务器异步加载数据的简单方法。
这是load()方法的语法:
$(selector).load(URL, data, callback)
参数:
URL-指定您要请求的URL
data -(可选)指定与请求一起发送到服务器的纯对象或字符串
callback-(可选)指定在load()方法完成后执行的回调函数
以下示例将ajax_intro.txt文件的内容加载到DIV元素中:
$("button").click(function(){ $("div").load("ajax_intro.txt"); });测试看看‹/›
以下示例加载ajax_post.html页面,并发送一些其他数据:
$("button").click(function(){ let data = {fname:"Seagull", lname:"Anna"}; $("div").load("ajax_post.php", data); });测试看看‹/›
这是PHP文件的外观(“ ajax_post.html”):
<?php echo "<p>Hello ".$_POST['fname']." ".$_POST['lname'].", How are u doing?</p>"; ?>
请求方法:如果将数据作为对象提供,则使用POST方法。否则,假定为GET。
使用回调加载页面
可选的callback参数指定load()方法完成后要运行的回调函数。
回调函数可以具有不同的参数:
response -包含请求中的结果数据
status -包含请求的状态("success", "notmodified", "error", "timeout", 或 "parsererror")
xhr-包含XMLHttpRequest对象
以下示例将加载ajax_post.html页面,并发送一些其他数据和警报状态消息:
$("button").click(function(){ let data = {fname:"Seagull", lname:"Anna"}; $("div").load("ajax_post.php", data, function(response, status){ alert(status); }); });测试看看‹/›
以下示例在Ajax请求遇到错误时显示通知:
$("button").click(function(){ let data = {fname:"Seagull", lname:"Anna"}; $("#success").load("wrong_file.php", data, function(response, status, xhr){ if(status == "error"){ let msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); });测试看看‹/›
加载页面片段
jQuery load()方法还允许我们仅获取文档的一部分。
这可以通过在url参数后面附加一个空格和jQuery选择器来简单地实现。
以下示例将文件“ ajax_load.html”中ID为“ table”的元素的内容加载到DIV元素中:
$("button").click(function(){ $("div").load("ajax_load.html #table"); });测试看看‹/›
jQuery AJAX参考
有关完整的AJAX方法参考,请访问我们的jQuery AJAX参考。