首頁 > web前端 > js教程 > 主體

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結_jquery

WBOY
發布: 2016-05-16 17:15:23
原創
935 人瀏覽過

詳細解讀Jquery各Ajax函數:
$.get(),$.post(),$.ajax(),$.getJSON()

一,$.get(url,[data],[callback])

說明:url為請求位址,data為請求資料的列表,callback為請求成功後的回呼函數,該函數接受兩個參數,第一個為伺服器傳回的數據,第二個參數為伺服器的狀態,是可選參數。

而其中,伺服器回傳資料的格式其實是字串形勢,並不是我們想要的json資料格式,在此引用只是為了對比說明

複製程式碼 程式碼如下:

$.get("data.php",$("#firstName.val()"),function(data){

$("#getResponse").html(data); }//傳回的data是字串型別

);


二,$.post(url,[data],[callback],[type])

說明:這個函數跟$.get()參數差不多,多了一個type參數,type為請求的資料類型,可以是html,xml,json等類型,如果我們設定這個參數為:json,那麼回傳的格式則是json格式的,如果沒有設置,就和$.get()回傳的格式一樣,都是字串的

複製程式碼 程式碼如下:

$.post("data.php",$("#firstName.val()"),function(data){

$("#postResponse").html(data.name);

},"json"//設定了取得資料的類型,所以得到的資料格式為json類型的

);


三,$.ajax(opiton)

說明:$.ajax()這個函數功能強大,可以對ajax進行許多精確的控制,需要詳細說明的請參考相關資料

複製程式碼 程式碼如下:

$.ajax({

url: "ajax/ajax_selectPicType.aspx",

data:{Full:"fu"},

type: "POST",

dataType:'json',

success:CallBack,

error:function(er){

BackErr(er);}

});


四,$.getJSON(url,[data],[callback])
複製程式碼 程式碼如下:

$.getJSON("data.php",$("#firstName.val() "),function(jsonData){

$("#getJSONResponse").html(jsonData.id);}//無設定,直接取得的資料型別為json,
所以呼叫時需要使用jsonData.id方式

);


When Ajax meets jQuery 基於AJAX的應用現在越來越多,而對於前台開發人員來說,直接和底層的HTTPRequest打交道又不是一件令人愉快的事情。 jQuery既然封裝了 JavaScript,肯定已經考慮過AJAX應用的問題。的確,如果用jQuery寫AJAX會比直接用JS寫方便N倍。 (不知道用jQuery長了, 會不會喪失對JS的知識了…) 這裡假設大家對jQuery語法已經比較熟悉,來對ajax的一些應用作一些總結。

載入靜態頁

load( url, [data], [callback] );
url (String) 請求的HTML頁的URL位址
data (Map)(可選參數) 發送至伺服器的key/value 資料
callback (Callback) (可選參數) 請求完成時(不需要是success的)的回呼函數

load()方法可以輕鬆載入靜態頁面內容到指定jQuery物件。

複製程式碼 程式碼如下:

$('#ajax-div').load( 'data.html');

這樣,data.html的內容將會被載入到ID為ajax-div的DOM物件之內。你甚至可以透過制定ID來實現載入部分內容的Ajax操作,如:
複製程式碼 程式碼如下:

$('#ajax-div').load('data.html#my-section');

實作GET和POST方法

get( url, [data], [callback] )
url (String) 發送請求的URL位址.
data (Map)(可選參數) 要發送給伺服器的數據,以Key/ value 的鍵值對形式表示,會做為QueryString附加到請求URL中
callback (Callback) (可選參數) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)

很明顯這是一個專門實現GET方式的函數,使用起來也相當的簡單

複製程式碼 程式碼如下:

$.get('login.php', {
   id      : 'Robin',
   password: '123456',   //data為回傳對象,status為請求的狀態
   alert(data);
   //此時假設伺服器腳本會回傳一段文字"你好,Robin ! >  });


post( url, [data], [callback], [type] )

url (String) 發送請求的URL位址.
data (Map)(可選參數) 要傳送給伺服器的數據,以Key/value 的鍵值對形式表示
callback (Callback) (可選參數) 載入成功時回呼函數(只有當Response的回傳狀態是success才是呼叫該方法)
type (String) (可選參數) 請求資料的類型,xml,text,json等
也是jQuery提供的簡便函數,其實用法




複製程式碼


程式碼如下: 程式碼如下: 🎜>$.post('regsiter.php', {   id:'Robin',
   password: '123456',
   type:'user'
  },function(data, st)'s> {
   alert(data);
  }, "json");


事件驅動的腳本載入函數:getScript()

getScript( url, [callback] )
url (String) 待載入 JS 檔案位址
callback (Function) (可選) 成功載入後回呼函數

getScript()函數可以遠端載入JavaScript腳本並且執行。這個函數可以跨 域載入JS檔(神奇…?!)。這個函數的意義是巨大 的,它可以很大程度的縮減頁面初次載入的程式碼量,因為你可以根據使用者的互動來載入對應的JS文件,而不必在頁面初始化的時候全部載入。


複製程式碼

程式碼如下:$.getScript('ajaxEvent.js' ) {   alert("Scripts Loaded!");
   //載入ajaxEvent.js,且成功載入後顯示對話方塊提示。 >建構資料通訊的橋樑:getJSON()

getJSON(url,[data],[callback])
url (String) 傳送請求位址
data (Map) (可選) 待傳送Key/value 參數
callback (Function) (可選) 載入成功時回呼函數。
JSON是一種理想的資料傳輸格式,它能夠很好的融合與JavaScript或其他宿主語 言,並且可以被JS直接使用。使用JSON相比傳統的透過 GET、POST直接發送」裸體」數據,在結構上更為合理,也更為安全。至於jQuery的getJSON()函數,只是設定了JSON參數的 ajax()函數的一個簡化版本。這個函數也是可以跨域使用的,比起get()、post()有一定優勢。另外這個函數可以透過把請求url寫 成”myurl?callback=X”這種格式,讓程式執行回呼函數X。



複製程式碼

程式碼如下:

$.getJSON('feed..'php' 🎜>   request: images,   id:      001,   size:    large   }, function(json) {o.   //此處json就是遠端傳回的json對象,假設其格式如下:    //{'images' : [    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );
;

更底层的ajax()函数
虽然get()和post()函数非常简洁易用,但是对于更复杂的一些设计需求还是无法实现,比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更为具体的函数:ajax()。

ajax( options )
ajax()提供了一大票参数,所以可以实现相当复杂的功能。

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request }

cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。

参数: XMLHttpRequest 对象,成功信息字符串。

function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。
dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息
返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

“xml”: 返回 XML 文档,可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息;包含 script 元素。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,

如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。

这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,

如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。

使用 HTTP 包 Last-Modified 头信息判断。

processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)

以配合默认内容类型 “application/x-www-form-urlencoded”。

如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success Function

请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

データ型として xml、script、html、json を指定でき、beforeSend、error、success、complete、その他の状態の処理関数を設定して、ユーザーの Ajax エクスペリエンスを完全に定義するために他の多くのパラメーターをカスタマイズすることもできます。 。次の例では、ajax() を使用して XML ドキュメントを呼び出します:

コードをコピー コードは次のとおりです:

$.ajax({
url: 'doc.xml',
タイプ: 'GET',
dataType: 'xml',
タイムアウト: 1000,
error: function(){
alert('XML ドキュメントのロード中にエラーが発生しました');
},
success: function(xml){
alert(xml);
//xml はここにありますXML jQuery オブジェクトである場合は、find()、next()、または >
AJAX イベントの詳細をご覧ください
前に説明したメソッドの一部には、ページの観点から見ると、独自のイベント処理メカニズムがあります。全体として、それらはローカル関数としか言えません。 jQuery は、特別なニーズを満たすために AJAX グローバル関数の定義を提供します。 jQuery が提供するすべての関数を以下に示します (トリガー順に並べています):

ajaxStart
(グローバル イベント) は新しい Ajax リクエストを開始しますが、現時点で進行中の他の Ajax リクエストはありません。
beforeSend
(ローカル イベント) は Ajax リクエストの開始時にトリガーされます。必要に応じて、ここで XMLHttpRequest オブジェクトを設定できます。 ajaxSend

(グローバル イベント) リクエストが開始される前にトリガーされるグローバル イベント
success
(ローカル イベント) リクエストが成功したときにトリガーされます。つまり、サーバーはエラーを返さず、返されたデータにはエラーがありません。
ajaxSuccess
グローバル イベント グローバル リクエストの成功
error
(ローカル イベント) は、エラーが発生した場合にのみトリガーされます。成功コールバック関数とエラー コールバック関数を同時に実行することはできません
ajaxError
グローバル イベント エラーが発生するとグローバル イベントがトリガーされます
complete
(ローカル イベント) リクエストが成功したか失敗したかに関係なく、同期リクエストの場合、このイベントはリクエストの完了時にトリガーされます。
ajaxComplete
グローバル イベント リクエストの完了時にグローバル イベントがトリガーされます。
ajaxStop
(グローバル イベント) no の場合Ajax が進行中、
ローカル イベントがトリガーされます。 これは前の関数で紹介しました。主にグローバル イベントを見てみましょう。グローバル イベント監視がオブジェクトに対して実行される場合、世界中のすべての AJAX アクションがそのオブジェクトに影響を与えます。たとえば、ページが AJAX 操作を実行している場合、ID が「loading」の DIV が表示されます。




コードをコピー

コードは次のとおりです: $("#loading").ajaxStart(function(){ $(this).show(); });

グローバル イベントは、AJAX リクエストごとに個別に設定することなく、グローバル エラー応答と成功応答を作成するのにも役立ちます。グローバル イベントのパラメーターは非常に便利であることを指摘しておく必要があります。 ajaxStart と ajaxOptions を除いて、他のイベントには、event、XMLHttpRequest、および ajaxOptions の 3 つのパラメーターがあります。最初のパラメータはイベント自体、2 番目は XHR オブジェクト、3 番目は渡した ajax パラメータ オブジェクトです。オブジェクト内のグローバル AJAX 状況を表示します:



コードをコピー
コードは次のとおりです: $( "#msg").beforeSend(function(e,xhr,o) { $(this).html("Requesting" o.url); }).ajaxSuccess(function(e,xhr) , o) {
$(this).html(o.url "リクエスト成功");
}).ajaxError(function(e,xhr,o) {
$(this).html( o .url "Request failed");
});


明らかに、3 番目のパラメーターは、AJAX イベントに追加したカスタム パラメーターを渡すのにも役立ちます。 単一の AJAX リクエストで、global の値を false に設定すると、このリクエストを AJAX グローバル イベントから独立させることができます。



コードをコピー
コードは次のとおりです:$.ajax({ url : "request .php", global: false,
// グローバル Ajax イベントを無効にします。
});


グローバル AJAX のパラメータを設定したい場合は、 ajaxSetup()関数を使用します。たとえば、すべての AJAX リクエストを request.php に渡し、グローバル メソッドを無効にし、POST メソッドの配信を強制します:



コードをコピーします
次のように: $.ajaxSetup({ url: "request.php", global: false,
type: "POST"
});


知っておくべきいくつかのメソッド
AJAX の記述は、ページから対応する値を取得することから切り離せません。ここではいくつかの簡単な方法を示します:

val()
val() 関数は、あらゆる種類の入力の値など、フォーム コンポーネントの値を返すことができます。セレクター操作を使用すると、オプション グループ、入力ボックス、ボタン、その他の要素の値を簡単に取得できます。

コードをコピー コードは次のとおりです。

$("input[name='info ']: text").val();
//info
$("input[name='pass']:password").val();// pass
という名前のパスワードボックスの値を返します$("input[name='save']:radio").val();
// save/ /など


serialize()

serialize 関数は、フォーム オブジェクトのすべての値を文字列シーケンスに変換するのに役立ちます。 GET 形式でリクエストを書きたい場合に非常に便利です。 serializeArray() は、JSON オブジェクトを返す点を除いて、serialize() に似ています。


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板