jQuery AJAX — 篇二 $.get()和 $.post()

　上篇博客中说到jQuery对Ajax操作进行了封装，我们可以很简单的应用AJAX，并且学习了jQuery AJAX的 $.load()方法，今天再来学习另外两个方法$.get()和$.post()

GET和POST 

　　在学习AJAX时我们就学过了GET和POST这两种请求方式，一个主要的区别是：

　　GET方式，一般用于获取URL上的资源，主要是读取，可以被缓存；

　　POST方式，一般用于更新资源，不会被缓存。

　　我们可以找一个具体的例子来理解，我们在对这篇博客进行多次请求，返回的内容还是这篇博客，是不变的，我们理解为GET方式，如果我们在进行评论就理解为POST方式，大家可以体验一下这个“POST”。

  

　　又一次比较了GET和POST，大家不要拍砖，其实每接触到一次再进行一次学习，这就是一个反复的过程。

 

　　下面我们看$.get()和$.post()的实例和说明

$.get()方法

我们接着上篇博客的例子再来用$.get()方法实现。

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.         <metahttp-equivmetahttp-equiv="Content-Type" content="text/html;charset=UTF-8">  
  6.         <scripttypescripttype="text/javascript" src="jquery.js"></script>  
  7.         <scripttypescripttype="text/javascript">  
  8.             $(document).ready(function(){  
  9.                $("#btn").click(function(){  
  10.                    var userName =document.getElementById("UserName").value;  
  11. 　　　　　　　　　   //$('#message').load("AJAX?name=" + userName);  
  12.    
  13.                    //$.get()方法  
  14.                    $.get("AJAX?name=" + userName,function(data,status){  
  15.                         $("#message").html(data);  
  16.                         alert(status);  
  17.                     });                      
  18.                 });  
  19.               });  
  20.         </script>  
  21.     </head>  
  22.     <body>  
  23.         <input type="text"id="UserName" value="admin"/>  
  24.         <input type="button"id="btn" value="校验用户名"/>  
  25.         <br/>  
  26.         <dividdivid="message"></div>  
  27.     </body>  
  28. </html>  

 

 

通过实现代码，来看$.get()的使用说明

$.get()方法 ：通过 HTTPGET 请求从服务器上请求数据。

    语法：$.get(url,[data],[callback],[type])

参数说明：

         url：请求的url地址

　　data：发送至服务器的key/value数据会作为QueryString附加到请求URL中

　　callback：载入成功时的回调函数

　　type：服务器返回的内容的格式，包括xml html script json text default

　　参数必须的是url，其它参数可选

 

回调函数：

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. function(data,status){  
  2.   
  3. 　　$("#message").html(data);  
  4.   
  5. });   

 

data：请求返回的内容

status：请求的状态：success、error、notmodified、timeout

  

$.post()方法：通过 HTTP POST 请求从服务器上请求数据。

　　语法：$.post(url,[data],[callback],[type])

　　从语法上很容易看出，和$.get()方法使用一样。

 

$('#message').get()是否正确？

　　上篇博客中是这样写的$('#message').load("AJAX?name="+ userName);开始在实现$.get()时我也这样写$('#message').get()，结果却不通过。这是为什么

　　$.load()和$.get()在从服务器获取数据的方法上，几乎是一样的，不同的是$.load()它不是全局函数，并且拥有隐式的回调函数，当侦测到成功的响应时（比如，当 textStatus 为 "success" 或"notmodified" 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单：

　　$('#message').load("AJAX?name="+ userName);

 

服务端代码和XML完全和上篇博客例子一样，不再写。

 

未完结…

　　$.get()和$.post()原理其实还是get和post请求的原理，只不过通过jQuery让我们的实现变得简单（这都得益于jQuery强大的功能）。jQuery AJAX方法了解和学习仍在继续，别走开，马上回来。现在好像很流行"马上"

posted @ 2017-01-15 17:05  天涯海角路  阅读(115)  评论(0)    收藏  举报