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

最新推荐文章于 2024-06-02 10:36:27 发布

AkkJiang~

最新推荐文章于 2024-06-02 10:36:27 发布

阅读量1.4w

点赞数 4

分类专栏： JS

本文链接：https://blog.csdn.net/akkzhjj/article/details/18712985

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

AJAX

7 篇文章 0 订阅

订阅专栏

　　上篇博客中说到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完全和上篇博客例子一样，不再写。