首页 > 程序开发 > web前端 > JavaScript >

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

2014-01-24

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

  上篇博客中说到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()方法实现。



    
        
        
        <scripttype="text/javascript" src="jquery.js"></script>
        <scripttype="text/javascript">
            $(document).ready(function(){
               $("#btn").click(function(){
                   var userName =document.getElementById("UserName").value;
            //$('#message').load("AJAX?name=" + userName);
 
                   //$.get()方法
                   $.get("AJAX?name=" + userName,function(data,status){
                        $("#message").html(data);
                        alert(status);
                    });                    
                });
              });
        </script>
    
    
        
        
        

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

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

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

参数说明:

url:请求的url地址

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

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

  type:服务器返回的内容的&#26684;式,包括xml html script json text default

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


回调函数:

function(data,status){

  $("#message").html(data);

}); 

data:请求返回的内容

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

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

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

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

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

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

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

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

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

未完结…

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

相关文章
最新文章
热点推荐