jQuery中Ajax的get、post等方法詳解

jQuery中Ajax的get、post等方法詳解_jquery

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

load()方法通常用來從Web伺服器上擷取靜態資料檔案，然而這並不能體現ajax的全部價值。

在項目中，如果需要傳遞一些參數給伺服器中的頁面，那麼可以使用$.get()或者$.post()方法(或者是$.ajax()方法)

$.get()方法使用GET方式來進行非同步請求。結構為：$.get(url [, data] [, callback] [, type])

$.get()方法參數解釋如下:

參數名稱	類型	說明
url	String	請求的HTML頁的URL地址
data(可選)	Object	發送至伺服器的key/value資料會作為QueryString附加到請求URL中
callback(可選)	Function	載入成功時回呼函數(只有當Response的返回狀態是success才調用該方法)自動將請求結果和狀態傳遞給該方法
type(可選)	String	伺服器端返回內容的格式，包括xml、html、script、json、text和_default

$.post()方法。

$.post()和$.get()方法的結構和使用方式相同，不過它們之間仍然有以下區別：

GET請求會將參數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容發送給Web伺服器。
GET方式對傳輸的資料有大小限制(通常不大於2KB)，而使用POST方式傳遞的資料量要比GET方式大得多(理論上不受限制)
GET方式請求的資料會被瀏覽器緩衝起來，因此其他人就可以從瀏覽器的記錄中讀取到這些資料，例如帳號和密碼等。在某種情況下，GET方式會帶來嚴重的安全性問題，而POST方式相對來說可以避免這些問題
GET方式和POST方式傳遞的資料在伺服器端的擷取也不相同。

$.getScript()：jQuery提供了此方法來直接載入js檔案，與載入一個HTML片段一樣簡單方便，並且不需要對JavaScript檔案進行處理，JavaScript檔案會自動執行。

jQuery代碼如下：

複製代碼代碼如下:

$(function () {
        $("#send").click(function () {
            $.getScript("test.js");
        });
})

與其他ajax方法一樣，$.getScript()方法也有回呼函數，它會在JavaScript檔案載入成功後運行。

例如：想載入jQuery官方顏色動畫外掛程式(jquery.color.js)，成功後給元素繫結顏色變化動畫：

複製代碼代碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
        .block{width:80px;height:80px;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<button id="go">運行</button>
<div class="block"></div>
</body>
<script type="text/javascript">
    $(function () {
        $.getScript("jquery.color.js", function () {
            $("#go").click(function () {
                $(".block").animate({backgroundColor: 'pink'}, 1000)
                        .animate({backgroundColor: 'blue'}, 1000);
            });
        })
    })
</script>
</html>

$.getJson()：該方法用於載入JSON檔案，用法與$.getScript()相同。

複製代碼代碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<br/>
<p>
    <input type="button" id="send" value="載入"/>
</p>
<div class="comment">已有評論：</div>
<div id="resText" >
</div>
</body>
<script type="text/javascript">
    $(function () {
        $('#send').click(function() {
            $.getJSON('test.json', function(data) {
                $('#resText').empty();
                var html = '';
                $.each( data , function(commentIndex, comment) {
                    html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                })
                $('#resText').html(html);
            })
        })
    })
</script>
</html>

test.json檔案為：

複製代碼代碼如下:

[
{
    "username": "張三",
    "content": "沙發."
},
{
    "username": "李四",
    "content": "板凳."
},
{
    "username": "王五",
    "content": "地板."
}
]

使用JSONP形式的回呼函數來載入其他網站的JSON資料。例如：

複製代碼代碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .para {
            width:100px;
            height:100px;
            margin:5px;
            border:0;
        }
    </style>
    <title></title>
</head>
<body>
<p>
    <input type="button" id="send" value="載入"/>
</p>
<div id="resText" >
</div>
</body>
<script type="text/javascript">
    $(function () {
        $('#send').click(function() {
            $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                    function(data){
                        $.each(data.items, function( i,item ){
                            $("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");
                            if ( i == 3 ) {
                                return false;
                            }
                        });
                    }
            );
        })
    })
    /**
     * JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過JavaScript Callback的形式實現跨域訪問
     * 上述的url地址並不能請求到資料，僅用作說明。
     * */
</script>
</html>

注意：

jQuery將自動把URL裡的回呼函數，例如"url?callback=?"中的後一個”?“替換為正確的函數名，以執行回呼函數。
JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過JavaScript Callback的形式實現跨域訪問。由於JSON只是一種含有簡單括弧結構的純文字，因此許多通道都可以交換JSON訊息。而由於同源策略的限制，開發人員不能在於外部伺服器進行通訊的時候使用XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用JSON和<script>標記相結合的方法，從伺服器端直接返回可執行檔JavaScript函數調用或者JavaScript對象。目前JSONP已經成為各大公司的Web應用程式跨域首選。
$.ajax()方法時jQuery最底層的ajax實現。它的結構為:

$.ajax(options).該方法只有一個參數，但在這個對象裡包含了$.ajax()方法所需要的請求設定以及回呼函數等資訊，參數以key/value的形式存在，所有參數都是可選的，

常用參數列表為：

參數名稱	類型	說明
url	String	(預設為當前頁地址)發送請求的地址
type	String	請求方式(post或get)預設為get。注意其他HTTP要求方法，如PUT何DELETE也可以使用，但僅部分瀏覽器支援
timeout	Number	佈建要求逾時時間(毫秒)。此設定將覆蓋$.ajaxSetup()方法的全域設定
data	Object或String	發送到伺服器的資料。如果不是字串，將自動轉換為字串格式。GET請求中將附加在url後。防止這種自動轉換，可以查看processData選項。對象必須為key/value格式，例如{foo1:"bar1", foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，jQuery將自動為不同值對應同一個名稱。例如{foo:["bar1", "bar2"]}轉換為&foo=bar1&foo=bar2
dataType	String	預期伺服器返回的資料類型。如果不指定，jQuery將自動根據HTTP包MIME資訊返回responseXML或responseText，並作為回呼函數參數傳遞。可用的類型如下。 xml：返回XML文檔，可用jQuery處理 html：返回純文字HTML資訊；包含的script標籤會在插入DOM時執行 script：返回純文字JavaScript代碼。不會自動緩衝結果。除非設定了cache參數。注意在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。 json：返回JSON資料 jsonp：JSONP格式。使用JSONP形式調用函數時，例如myurl?callback=?，jQuery將自動替換後一個”?“為正確的函數名，以執行回呼函數。 text：返回純文字字串
beforeSend	Function	發送請求前可以修改XMLHttpRequest對象的函數，例如添加自訂HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest對象是唯一的參數。 function(XMLHttpRequest) { 　　this;//調用本次Ajax請求時傳遞的options參數 }
complete	Function	請求完成後調用的回呼函數(請求成功或失敗時均調用) 參數：XMLHttpRequest對象和一個描述成功請求類型的字串。 function(XMLHttpRequest, textStatue){ 　　this;//調用本次Ajax請求時傳遞的options參數 }
success	Function	請求成功後調用的回呼函數，有兩個參數。 (1)由伺服器返回，並根據dataType參數進行處理後的資料 (2)描述狀態的字串 function(data, textStatus) { 　　//data可能是xmlDoc、jsonObj、html、text等　　this;//調用本次Ajax請求時傳遞的options參數 }
error	Function	請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤資訊、捕獲的錯誤對象(可選)。 Ajax事件函數如下： function(XMLHttpRequest, textStatus, errorThrown) { 　　//通常情況下textStatus和errorThrown只有其中一個包含資訊　　this;//調用本次Ajax請求時傳遞的options參數 }
global	Boolean	預設為true。表示是否觸發全域Ajax事件。設定為false將不會觸發全域Ajax事件，AjaxStart或AjaxStop可用於控制各種Ajax事件

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More