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

来源:http://www.cnblogs.com/nield-bky/archive/2017/01/10/6271049.html
-Advertisement-
Play Games

本文對Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法進行了詳細的總結，需要的朋友可以參考下，希望對大家有所幫助。 詳細解讀Jquery各Ajax函數： $.get(),$.post(),$.ajax(),$.getJSON() 一，$.get(url, ...


 

本文對Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法進行了詳細的總結，需要的朋友可以參考下，希望對大家有所幫助。

詳細解讀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',       gate    : 'index'   }, function(data, status) {    　//data為返回對象，status為請求的狀態    　alert(data);    //此時假設伺服器腳本會返回一段文字"你好，Robin！"， 那麼瀏覽器就會彈出對話框顯示該段文字       alert(status);    //結果為success, error等等，但這裡是成功時才能運行的函數   });

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, status) {       alert(data);   }, "json");

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

getScript( url, [callback] )

url (String) 待載入 JS 文件地址

callback (Function) (可選) 成功載入後回調函數

getScript()函數可以遠程載入JavaScript腳本並且執行。這個函數可以跨  域載入JS文件（神奇……？！）。這個函數的意義是巨大  的，它可以很大程度的縮減頁面初次載入的代碼量，因為你可以根據用戶的交互來載入相應的JS文件，而不必在頁面初始化的時候全部載入。

代碼如下: $.getScript('ajaxEvent.js', function() {       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) {        alert(json.images[0].link);        //此處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、sucess、complete等 狀態設置 處理函數，眾多其它參數也可以訂完完全全定義用戶的Ajax體驗。下麵的例子中，我們用ajax()來調用一個XML文檔：

代碼如下: $.ajax({        url: 'doc.xml',        type: 'GET',        dataType: 'xml',        timeout: 1000,        error: function(){            alert('Error loading XML document');        },        success: function(xml){                 alert(xml);      //此處xml就是XML的jQuery對象了，你可以用find()、next()或XPath等方法在裡面尋找節點， 和用jQuery操作HTML對象沒有區別       } });

進一步瞭解AJAX事件 前面討論的一些方法都有自己的事件處理機制，從頁面整體來說，都只能說是局部函數。jQuery提供了AJAX全局函數的定義，以滿足特殊的需求。下麵是jQuery提供的所有函數（按照觸發順序排列如下）：

ajaxStart

(全局事件) 開始新的Ajax請求，並且此時沒有其他ajax請求正在進行

beforeSend

(局部事件) 當一個Ajax請求開始時觸發。如果需要，你可以在這裡設置XMLHttpRequest對象

ajaxSend

(全局事件) 請求開始前觸發的全局事件

success

(局部事件) 請求成功時觸發。即伺服器沒有返回錯誤，返回的數據也沒有錯誤

ajaxSuccess

全局事件全局的請求成功

error (局部事件) 僅當發生錯誤時觸發。你無法同時執行success和error兩個回調函數

ajaxError

全局事件全局的發生錯誤時觸發

complete

(局部事件) 不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時觸發這個事件

ajaxComplete

全局事件全局的請求完成時觸發

ajaxStop

(全局事件) 當沒有Ajax正在進行中的時候，觸發 局部事件在之前的函數中都有介紹，我們主要來看看全局事件。對某個對象進行全局事件監聽，那麼全局中的AJAX動作，都會對其產生影響。比如，當頁面在進行AJAX操作時，ID為”loading”的DIV就顯示出來：

代碼如下: $("#loading").ajaxStart(function(){         $(this).show();   });

全局事件也可以幫助你編寫全局的錯誤相應和成功相應，而不需要為每個AJAX請求獨立設置。有必要指出，全局事件的參數是很有用的。除了  ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest,  ajaxOptions三個參數。第一個參數即事件本身；第二個是XHR對象；第三個是你傳遞的ajax參數對象。在一個對象里顯示全局的AJAX情況：

代碼如下: $("#msg").beforeSend(function(e,xhr,o) {        $(this).html("正在請求"+o.url);   }).ajaxSuccess(function(e,xhr,o) {        $(this).html(o.url+"請求成功");   }).ajaxError(function(e,xhr,o) {        $(this).html(o.url+"請求失敗"); });

很顯然，第三個參數也可以幫助你傳遞你在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的值。配合選擇符操作，你可以輕易獲取選項組、輸入框、按鈕等元素的值。

代碼如下: $("input[name='info']:text").val(); //返回名字為info的文本框的值 $("input[name='pass']:password").val(); //返回名字為pass的密碼框的值 $("input[name='save']:radio").val(); //返回名字為save的單選項的值 //以此類推

serialize()

serialize函數可以幫你把表單對象的所有值都轉換為字元串序列。如果你要寫GET格式的請求，這個就非常方便了。

serializeArray()和serialize()類似，只不過它返回的是JSON對象。

PS：本站還提供了幾款功能十分強大的json解析、轉換與格式化工具供大家選擇使用，相信對於大家接下來的json格式數據處理會有所幫助：

線上JSON代碼檢驗、檢驗、美化、格式化工具： http://tools.jb51.net/code/json

線上XML/JSON互相轉換： http://tools.jb51.net/code/xmljson

json代碼線上格式化/美化/壓縮/編輯/轉換工具： http://tools.jb51.net/code/jsoncodeformat

C語言風格/HTML/CSS/json代碼格式化美化工具： http://tools.jb51.net/code/ccode_html_css_json

 

原文出處：http://www.jb51.net/article/43194.htm


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端MVC學習筆記（二）——AngularJS驗證、過濾器、指令
    一、驗證二、過濾器2.1、內置過濾器2.1.1、在模板中使用過濾器2.1.2、在腳本中調用過濾函數2.2、自定義過濾器三、指令（directive）3.1、支持AngularJS功能的指令3.1.1、應用與模塊（ng-app）3.1.2、控制器（ng-Controller）3.1.3、包含（ng-I... ...
  • 使用prismjs為網站添加代碼高亮功能
    prismjs 是一款輕量、可擴展的代碼語法高亮庫，使用現代化的 Web 標準構建，使用 Prismjs 可以快速為網站添加代碼高亮功能，支持超過113中編程語言，還支持多種插件，是簡潔、高效的代碼高亮解決方案。科技愛好者博客就是使用了Prism.js 實現漂亮的代碼語法高亮功能，本文教你如何在wo ...
  • Jquery Form表單取值
    之前js取form表單的值都是一個一個的取，數量一多之後容易出錯而且煩透了。感謝那些願意分享的人。 頁面定義form，並給form指定id值，裡面的元素只要是需要鍵值對應的都賦予name屬性，並且name值等於後臺能識別的參數名。 ...
  • CSS align-content 屬性
    實例 對齊彈性盒的 <div> 元素的各項： div { display: flex; flex-flow: row wrap; align-content:space-around; } 複製 效果預覽 瀏覽器支持 表格中的數字表示支持該屬性的第一個瀏覽器的版本號。 緊跟在 -webkit-, - ...
  • 模擬Vue之數據驅動3
    在"模擬Vue之數據驅動2"中，我們實現了個Observer構造函數，通過它可以達到監聽已有數據data中的所有屬性。 但，倘若我們想在某個對象中，新增某個屬性呢？ 如下： 那麼豈不是，新增的infor屬性，以及它的對象屬性，沒有得到監聽。 此時，應該怎麼處理呢？ 通過走讀Vue源碼，發現他是採用另 ...
  • CSS倒影
    前面的話   CSS倒影目前只有chrome和safari瀏覽器支持，且需要添加 webkit 首碼。本文將詳細介紹CSS倒影box reflect   語法 webkit box reflect 初始值: none 應用於: 塊級元素(包括inline block) ...
  • CSS濾鏡
    [1]語法 [2]灰度 [3]飽和度 [4]褐色 [5]色相 [6]反色 [7]透明度 [8]亮度 [9]對比度 [10]模糊 [11]陰影 ...
  • JQuery動態操作表格
    新人，小白一枚，剛剛參加工作，所以會在這裡記錄一些遇到的問題。 最近要做的東西，是對一個表格動態的添加行，刪除行，並且對錶格中內容進行非空驗證。 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類