首頁 > web前端 > js教程 > jQuery中Ajax的get、post等方法詳解_jquery

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 16:19:06
原創
1261 人瀏覽過

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

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

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

$.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),成功後給元素綁定顏色變化動畫:

複製程式碼 程式碼如下:




   
   
   
   








 

$.getJson():此方法用於載入JSON文件,用法與$.getScript()相同。

複製程式碼 程式碼如下:




   
   
   
        * { 邊距:0;填入:0;}
        正文 { font-size:12px;}
        .comment { 邊距上方:10px;內邊距:10px;邊框:1px 實心#ccc;背景:#DDD;}
        .comment h6 { 字體粗細:700;字體大小:14px;}
        .para { 頂部邊距:5px;文字縮排:2em;背景:#DDD;}
    樣式>
    標題>
頭>




   


已評論:



身體>

    $(函數 () {
        $('#send').click(function() {
            $.getJSON('test.json', function(data) {
                $('#resText').empty();
                var html = '';
                $.each( 資料 , 函數(commentIndex, 註解) {
html = '
' comment['使用者名稱'] ':

' comment['content'] '

div>';
                })
                $('#resText').html(html);
            })
        })
    })
腳本>

test.json檔為:

複製程式碼程式碼如下:

[
  {
    "使用者名稱": "張三",
    「內容」:「沙發。」
  },
  {
    "使用者名稱": "李四",
    "content": "板凳。"
  },
  {
    "使用者名稱": "王五",
    「內容」:「地板。」
  }
]

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

複製程式碼程式碼如下:




   
   
   
        * { 邊距:0;填入:0;}
        正文 { font-size:12px;}
        .para {
            寬度:100px;
            高度:100px;
            邊距:5px;
            邊框:0;
        }
    樣式>
    標題>
頭>


   




身體>

    $(函數 () {
        $('#send').click(function() {
            $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback                     函數(資料){
                        $.each(data.items, function( i,item ){
                            $("jQuery中Ajax的get、post等方法詳解_jquery ").attr("src", item.F.m).appem.                             if ( i == 3 ) {
                                或回復錯誤;
                            }
                        });
                    }
            );
        })
    })
    /**
     *  JSONP(JSON with Padding)是一個非官方的協議,它允許在伺服器端整合Script tags返回至客戶端,透過JavaScript Callback的形式實現跨網域存取
     *  上述的url位址並不能請求到數據,且僅用作說明。
     **/
腳本>


注意:

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

$.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事件
相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
引入jQuery 文件
來自於 1970-01-01 08:00:00
0
0
0
jquery筆記哪裡有下?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎麼引入jquery
來自於 1970-01-01 08:00:00
0
0
0
php+jquery的問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板