JQuery（学习笔记五）AJAX常用三种方法

Love The Way You Lie 2022-05-14 12:24 145阅读 0赞

# 一、 AJAX 简介 #

一句话：在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

# 二、load() 方法 #

一句话：load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> //把文件 "demo_test.txt" 的内容加载到指定的 &lt;div&gt; 元素中 $("#div1").load("demo_test.txt"); &nbsp; //把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 &lt;div&gt; 元素 $("#div1").load("demo_test.txt #p1"); &nbsp; /* 
 <ul> 
 <li>responseTxt&nbsp;- 包含调用成功时的结果内容</li> 
 <li>statusTXT&nbsp;- 包含调用的状态</li> 
 <li>xhr&nbsp;- 包含 XMLHttpRequest 对象</li> 
 </ul>在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息 */ $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); ); </td> 
 </tr> 
 </tbody> 
</table>

# 三、get() 和 post() 方法 #

一句话：*GET* 从指定的资源请求数据，*POST* 向指定的资源提交要处理的数据。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* $.get(URL,callback); 必需的&nbsp;URL&nbsp;参数规定您希望请求的 URL。 可选的&nbsp;callback&nbsp;参数是请求成功后所执行的函数名。 */ //使用 $.get() 方法从服务器上的一个文件中取回数据 $("button").click(function(){ $.get("soleil.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); }); &nbsp; /* $.post(URL,data,callback); 必需的&nbsp;URL&nbsp;参数规定您希望请求的 URL。 可选的&nbsp;data&nbsp;参数规定连同请求发送的数据。 可选的&nbsp;callback&nbsp;参数是请求成功后所执行的函数名。 */ //使用 $.post() 连同请求一起发送数据 $("button").click(function(){ $.post("soleil.php", { name:"soleil", url:"http://www.soleil.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); </td> 
 </tr> 
 </tbody> 
</table>