jQuery實現Ajax

scwang90 發布于2019-08-23 12:37 / 437人閱讀

摘要：設置全局默認的默認選項實際用時仍然可以將默認選項值覆蓋和方法用于在請求發出前觸發函數。和請求出錯時注冊一個回調處理函數，這是一個。綁定一個函數當請求成功完成時執行，這是一個。

目前Web開發形式是后端僅僅提供api接口，那么系統的前端如何得到后端傳來的這些數據呢？

然后系統前端所填的信息又是如何傳遞給后端呢？

我想最容易易理解的方案那就是通過ajax進行前后端的數據交互，（直接用jQuery庫封裝好的ajax方法）

ajax都是異步請求的所以接下去所記錄的方法也都是異步進行的 load(url,[data],[callback]) 異步請求載入遠程HTML片段并插入至DOM中

直接加載HTML頁面

$("#abc").load("abc.html")

也可以加載HTML片段中某個需要的匹配部分

$("#abc").load("html5/abc.html #abc")

$.getJSON(url,[data],[callback]) 使用一個HTTP GET請求從服務器加載JSON編碼的數據

getJSON()是全局jQuery對象的方法，也就是全局函數。
通過url獲取JSON數據格式,然后使用回調函數將獲取的數據進行后續操作。

$.getJSON("abc.json",function(data){
    console.log(data);
})

$.getScript(url,[callback]) 使用一個HTTP GET請求從服務器加載并執行一個 JavaScript 文件

同getJSON方法一樣,也是全局jQuery對象的方法。
有時候初次加載頁面是有些js文件未必都是必須的，可以通過這個方法可以用戶在操作可以動態靈活的加載所需的js腳本。

$.getScript("abc/abc.js")

$.get(url,[data],[callback]) 使用一個HTTP GET請求從服務器加載數據

get可簡單的理解為從服務器獲取數據進行之后一系列操作。

$.get("http://www.imooc.com/data/info_f.php",function(data){
    $("#abc").html(data);
})

$.post(url,[callback]) 使用一個HTTP POST 請求從服務器加載數據

而post請求雖說與get請求結構一樣但也有一些區別.

GET方式對傳輸的數據大小有限制，而POST方式傳遞的數據量要比GET方式大得多。

$.post("http://www.imooc.com/data/check_f.php",{
    num:$("txtNumber").val()
},function(data){
    console.log(data);
})

使用post請求發送序列化表單數據

$.post("test.php", $("#testform").serialize(),function(data){
    alert("發送成功");
});

$.ajax([settings]) 執行一個異步的HTTP（Ajax）的請求

ajax()是功能最強大的請求數據的方法，不僅可以請求數據，也可以向服務器發送數據，也可以進行跨域獲取json數據。

$.ajax({
    url:"url"
    type:"post",
    async:true,
    data:data,
    dataType: "json",
    success:function(data){}
})

$.ajaxSetup[options] 設置全局默認的Ajax默認選項

$.ajaxSetup({
    type:"post",
    async:true,
    dataType: "json",
})

實際用$.ajax()時仍然可以將默認選項值覆蓋

ajaxStart()和ajaxStop()

$(document).ajaxStart(function() {
   $( "#loading" ).show();
 });
$(document).ajaxStop(function() {
    $( "#loading" ).hide();
});

ajaxStart()方法用于在Ajax請求發出前觸發函數。

ajaxStop()方法用于在Ajax請求完成后觸發函數。

$.ajaxError()和$.ajaxSuccess()

$.ajaxError() Ajax請求出錯時注冊一個回調處理函數，這是一個Ajax Event。

$.ajaxuccess() 綁定一個函數當Ajax請求成功完成時執行，這是一個AjaxEvent。

總結

關于前后端用數據Ajax實現就先到這吧，$.ajax()此方法是最底層的方法并未展，但的確在今后實踐生產是用得最多的，get和post 區別也是需要清楚的。

GPU云服務器云服務器 jquery?ajax jquery ajax 跨域 jquery ajax 數據綁定 jquery-ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98855.html

jQuery ajax 源碼分析之預處理和分發函數(prefilter/transport)

摘要：調用的情況下，我們通常用來請求數據的方法有前五種方法，在的實現中，本質上還是在調用第六種方法實現的單純在源碼中看前五個函數，代碼量都很少，多一點也就是函數，涉及到了的寫法，在調用成功時，對返回的數據使用內部方法進行渲調用jQuery 的情況下，我們通常用來請求數據的方法有 $(element).load(url, callback) $.get(url, data, callbac...

he_xd 2019-08-20 19:10 評論0 收藏0
原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤?；旧贤ㄟ^發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
通過 ES6 Promise 和 jQuery Deferred 的異同學習 Promise

摘要：和和都有和，但是略有不同。實際上返回的是一個對象。和添加的回調，添加的回調。所以在調用成功的情況下執行添加的回調，調用失敗時執行添加的回調。，產生對象并，產生對象并，然后繼續處理，的語法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不過它們的作用可以簡單的用兩句話來描述 Deffere...

Yujiaao 2019-08-21 10:39 評論0 收藏0
Ajax設置請求和接收響應、自己封裝簡易jQuery.Ajax、回調函數

摘要：設置請求和接收響應自己封裝簡易這篇文章是承接前幾篇博客的是前幾篇繼續學習包括學習與理解和簡化版自己實現等這篇文章只算是我的個人學習筆記內容沒有精心排版一些錯誤請見諒所有代碼都在這里從歷史可以看到所有代碼擺闊一個簡易的服務器所有代碼在歷史里 Ajax設置請求和接收響應、自己封裝簡易jQuery.Ajax 這篇文章是承接前幾篇博客的,是前幾篇繼續學習包括Ajax學習與理解和簡化版自己實現j...

Harpsichord1207 2019-08-23 10:42 評論0 收藏0
jquery ajax 方法封裝說明

摘要：簡要說明前面我寫了一篇方法封裝及文件設計文檔，主要用來說明我們在項目中通常會對的方法進行進一步的封裝處理，便于我們在業務代碼中使用。這篇文檔我們主要對封裝的方法進行一個簡要說明。簡要說明前面我寫了一篇《jquery ajax 方法封裝及 api 文件設計》文檔，主要用來說明我們在項目中通常會對 jquery 的 ajax 方法進行進一步的封裝處理，便于我們在業務代碼中使用。從那篇文...

z2xy 2019-08-23 16:26 評論0 收藏0