首頁 web前端 js教程 jquery中的ajax事件和get、post請求說明

jquery中的ajax事件和get、post請求說明

Jun 19, 2017 am 09:56 AM
ajax jquery post 事件

1. jQuery Ajax 事件

Ajax請求會產生若干不同的事件,我們可以訂閱這些事件並在其中處理我們的邏輯。在jQuery這裡有兩種Ajax事件:局部事件 和 全域事件。

局部事件就是在每次的Ajax請求時在方法內定義的,例如:

$.ajax({
 beforeSend: function(){
 // Handle the beforeSend event }, complete: function(){
 // Handle the complete event } // ... });
登入後複製

全域事件是每次的Ajax請求都會觸發的,它會向DOM中的所有元素廣播,在上面getScript() 範例中載入的腳本就是全域Ajax事件。全域事件可以如下定義:

$("#loading").bind("ajaxSend", function(){
 $(this).show();
 }).bind("ajaxComplete", function(){
 $(this).hide();
 });
登入後複製

或:

$("#loading").ajaxStart(function(){
 $(this).show();
 });
登入後複製

我們可以在特定的請求將全域事件停用,只要設定下global 選項就可以了:

$.ajax({
 url: "test.html",
 global: false,// 禁用全局Ajax事件. // ... });
登入後複製

2 . jQuery.get(url, [data], [callback], [type]):使用GET方式來進行非同步請求

參數:

url (String ) : 發送請求的URL位址.

data (Map) : (可選) 要傳送給伺服器的數據,以Key/value 的鍵值對形式表示。

callback (Function) : (可選) 載入成功時回呼函數(只有當Response的回傳狀態是success才是呼叫該方法)。

type (String) : (可選)官方的說明是:Type of data to be sent。其實應該為客戶端請求的類型(JSON,XML,等等)

這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可呼叫回調函數。如果需要在出錯時執行函數,請使用 $.ajax。範例程式碼:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
 //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息;
 //alert(textStatus);//请求状态:success,error等等。
 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数 //alert(this); });
登入後複製

點擊傳送請求:

jQuery.get()回呼函數裡面的this ,指向的是Ajax請求的選項設定資訊

3. jQuery. post( url, [data], [callback], [type] ) :使用POST方式來進行非同步請求

參數:

url (String) : 傳送請求的URL位址.

data (Map) : (可選) 要傳送給伺服器的數據,以Key/value 的鍵值對形式表示。

callback (Function) : (可選) 載入成功時回呼函數(只有當Response的回傳狀態是success才是呼叫該方法)。

type (String) : (可選)官方的說明是:Type of data to be sent。其實應該為客戶端請求的類型(JSON,XML,等等)

這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可呼叫回調函數。如果需要在出錯時執行函數,請使用 $.ajax。範例程式碼:

Ajax.aspx:

Response.ContentType = "application/json";
 Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");
登入後複製

jQuery 程式碼:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
 function (data, textStatus){
 // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this alert(data.result);
 }, "json");
登入後複製

點擊提交:

這裡設定了請求的格式為"json":

如果你設定了請求的格式為"json",此時你沒有設定Response回來的ContentType 為:Response.ContentType = "application/json"; 那麼你將無法捕捉到傳回的資料。

注意一下,alert(data.result); 由於設定了Accept標頭為“json”,這裡回傳的data就是一個物件,並不需要用eval()來轉換為對象。

以上是jquery中的ajax事件和get、post請求說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用Ajax從PHP方法取得變數? 如何使用Ajax從PHP方法取得變數? Mar 09, 2024 pm 05:36 PM

如何使用Ajax從PHP方法取得變數?

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改頁面所有a標籤的文本

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a標籤的文字內容

PHP 與 Ajax:建立動態載入內容的解決方案 PHP 與 Ajax:建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

PHP 與 Ajax:建立動態載入內容的解決方案

PHP程式碼範例:如何用POST方式傳參並實現頁面跳轉 PHP程式碼範例:如何用POST方式傳參並實現頁面跳轉 Mar 07, 2024 pm 01:45 PM

PHP程式碼範例:如何用POST方式傳參並實現頁面跳轉

PHP跳轉頁面並攜帶POST資料的實作方法 PHP跳轉頁面並攜帶POST資料的實作方法 Mar 22, 2024 am 10:42 AM

PHP跳轉頁面並攜帶POST資料的實作方法

如何使用 PHP 建立基於事件的應用程式 如何使用 PHP 建立基於事件的應用程式 May 04, 2024 pm 02:24 PM

如何使用 PHP 建立基於事件的應用程式

See all articles