<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery-AJAX</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.js"></script> <script> /* * jQuery load() 方法 * 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> 元素中： */ $(document).ready(function(){ $("#btn1").click(function(){ $("#test").load("demo_test.txt"); }); /* * 也可以把 jQuery 选择器添加到 URL 参数。 * 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中： */ $("#btn2").click(function(){ $("#test").load("demo_test.txt #p1"); }); /* * 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： * responseTxt - 包含调用成功时的结果内容 * statusTXT - 包含调用的状态 * xhr - 包含 XMLHttpRequest 对象 * 下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息： */ $("#btn3").click(function(){ $("#test").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功！"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); }); }); </script> </head> <body> <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3> <button id="btn1" type="button">获得外部的内容</button> <button id="btn2" type="button">获得外部内容2</button> <button id="btn3" type="button">获得外部内容3</button> </body> </html>