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

来源：互联网发布：linux redis主从配置编辑：程序博客网时间：2024/06/08 00:38

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

<!DOCTYPE html><html>    <head>        <title></title>        <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">        <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>    </head>    <body>        <input type="text"id="UserName" value="admin"/>        <input type="button"id="btn" value="校验用户名"/>        <br/>        <divid="message"></div>    </body></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，其它参数可选

回调函数：

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="+ 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方法了解和学习仍在继续，别走开，马上回来。现在好像很流行"马上"。

3 0