<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> //ajax() 方法用于执行 AJAX（异步 HTTP）请求。 $(document).ready(function(){ $("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div> <button>获取其他内容</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> //load() 方法从服务器加载数据，并把返回的数据放入被选元素中 //function(agr1:响应文本,agr2:响应的状态,agr3:报错信息[object object]) /* responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象 */ $(document).ready(function(){ $("#btn1").click(function(){ $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert(xhr,"外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); $("#btn2").click(function(){ $("#div1").load("/try/ajax/demo_test.txt1",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert(xhr,"外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText);//Error: 404: error }); }); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div> <button id='btn1'>获取外部内容1</button> <button id='btn2'>获取外部内容2</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <p> demo_test.php : <?php echo '这是个从PHP文件中读取的数据。'; ?> </p> <script> /* 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。 */ $(document).ready(function(){ $("#btn1").click(function(){ $.get("/try/ajax/demo_test.php",function(data,status){ alert("数据: " + data + " 状态: " + status);//success }); }); $("#btn2").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: " + data + " 状态: " + status); }); }); }); /* data: name:"菜鸟教程", url:"http://www.runoob.com" */ </script> </head> <body> <button id='btn1'>发送一个 HTTP GET 请求页面并获取返回内容</button> <button id='btn2'>发送一个 HTTP POST 请求页面并获取返回内容</button> </body> </html>