jQuery - AJAX load() 方法 · jQuery

## jQuery load() 方法 jQuery[load() 方法](https://www.w3cschool.cn/jquery/event-load.html)是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 **语法:** ``` $(*selector*).load(*URL,data,callback*); ``` 必需的*URL*参数规定您希望加载的 URL。可选的*data*参数规定与请求一同发送的查询字符串键/值对集合。可选的*callback*参数是 load() 方法完成后所执行的函数名称。这是示例文件（"demo\_test.txt"）的内容： ``` jQuery and AJAX is FUN!!! This is some text in a paragraph. ``` 下面的例子会把文件 "demo\_test.txt" 的内容加载到指定的元素中： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("/statics/demosource/demo_test.txt"); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX</h2></div> <button>获取外部内容</button> </body> </html> ``` 也可以把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo\_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的元素中： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("/statics/demosource/demo_test.txt #p1"); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div> <button>获取外部文本</button> </body> </html> ``` 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： * *responseTxt*\- 包含调用成功时的结果内容 * *statusTXT*\- 包含调用的状态 * *xhr*\- 包含[XMLHttpRequest 对象](https://www.w3cschool.cn/xml/xml-http.html) 下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("/statics/demosource/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> ``` **提示：**在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。