1. 程式人生 > >jquery Ajax應用與常用外掛

jquery Ajax應用與常用外掛

1:load()非同步請求資料
語法:load(url,[data],[callback]) 【url為載入伺服器地址,可選項data引數為請求是傳送的資料,callback引數為資料請求成功之後,執行的回撥函式】
生成AJAX請求,並通過該請求傳送資料
這裡寫圖片描述
生成AJAX請求,並使用回撥函式
這裡寫圖片描述
生成帶有錯誤的AJAX請求
這裡寫圖片描述

2:getJSON()方法非同步載入JSON格式資料
2.1:jQuery.getJSON(url,[data],[callback])
2.2:$.getJSON(url,[data],[callback])
語法: jQuery.getJSON(url,data,success(data,status,xhr))【url將請求傳送的那個url;data規定連同請求傳送到伺服器的資料;success規定請求成功時執行的函式,response - 包含來自請求的結果資料,status - 包含請求的狀態,xhr - 包含 XMLHttpRequest 物件】
等價於

這裡寫圖片描述
JSON是一種輕量級的資料格式,即陣列和物件
這裡寫圖片描述

3:get()方法以GET方式從伺服器獲取資料
$.get(url,[callback]) 【url:為載入伺服器地址;callback引數為資料請求成功後,執行的回撥函式,此函式還有一個引數“json”,如果麼哦有,接收不到值】。
這裡寫圖片描述

4:post()方法以POST 方式從伺服器傳送資料
$.post(url,[data],[callback]) 【url:為載入伺服器地址;可選項data引數為請求時傳送的資料;callback引數為資料請求成功後,執行的回撥函式】
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)【url:必需,規定把請求傳送到哪個 URL;data:可選,規定連同請求傳送到伺服器的資料;success(…):請求成功時執行的回撥函式;dataType:規定預期的伺服器響應的資料型別,預設執行智慧判斷(xml、json、script 或 html)。】
這裡寫圖片描述


這裡寫圖片描述
4.1:
這裡寫圖片描述
4.2:
這裡寫圖片描述
4.3:
這裡寫圖片描述
4.4:
這裡寫圖片描述
4.5:
這裡寫圖片描述
4.6:
這裡寫圖片描述

5:ajax()方法載入伺服器資料
5.1、jQuery.ajax([settings])
5.2、$.ajax([settings])
引數settings為傳送ajax請求時的配置物件:在該物件中,url表示伺服器請求路徑,data為請求時傳遞的資料,dataType為伺服器返回的資料型別,success為請求成功時執行的回撥函式(代引數),type為傳送資料請求的方式,預設為get(值“大寫”)。
這裡寫圖片描述

6:ajaxSetup()設定全域性Ajax預設選項
6.1 jQuery.ajax([options])
6.2 $.ajaxSetup([options])
可選項options引數為一個物件,通過該物件設定Ajax請求時的去全域性選項者。引數可用.ajax()的引數
注:

如果向伺服器傳送資料,需要設定type:”POST”,
這裡寫圖片描述

jQuery.ajaxSetup(name:value, name:value, …) 【name:value 可選,使用名稱/值對來規定 AJAX 請求的設定】
這裡寫圖片描述

常用外掛
1:表單驗證外掛—-validate
$(form).validate({options}) 【options:表示呼叫方法時的配置物件】
這裡寫圖片描述
.appendTo()把內容加入到指定的元素集合中。

2:表單外掛—-form
$(form).ajaxForm({options}) / .ajaxSubmit({options})
【form引數表示表單元素名稱;options是一個配置物件,用於在傳送ajax請求過程,設定傳送時的資料和引數。】
這裡寫圖片描述

5:cookie外掛—–cookie
語法:儲存 .cookie(key,value)/.cookie(key)/刪除$.cookie(key,null)
引數key為儲存cookie物件的名稱,value為名稱對應的cookie值。
【方便通過cookie物件儲存,讀取,刪除使用者的資訊,也能儲存使用者的瀏覽記錄】
這裡寫圖片描述

6:搜尋外掛—–autocomplete
語法:$(textbox).autocomplete(urldata,[options])【textbox引數為文字框元素名稱,urlData為外掛返回的相近字串資料,可選項引數options為呼叫外掛方法時的配置物件。】
這裡寫圖片描述

7:右鍵選單外掛—–contextmenu
語法:$(selector).contextMenu(menuId,{options})【Selector引數為繫結外掛的元素,meunId為快捷選單元素,options為配置物件。】此外掛可以繫結頁面中的任意元素
這裡寫圖片描述

8:自定義物件級外掛——lifocuscolor外掛 【新增滑鼠hover的效果】
語法:$(Id).focusColor(color) 【引數Id表示ul元素的Id號,color表示li元素選中時的背景色。】
這裡寫圖片描述

9:自定義類級別外掛—-twoaddresult
語法:.addNum(p1,p2)/.subNum(p1,p2)【這兩種格式分別為計算兩數值相加和相減的結果】
這裡寫圖片描述

UI型外掛
1:拖拽外掛—-draggable
語法:$(selector). draggable({options})【options引數為方法呼叫時的配置物件,根據該物件可以設定各種拖曳效果,如“containment”屬性指定拖曳區域,“axis”屬性設定拖曳時的座標方向】
這裡寫圖片描述

2:放置外掛—-droppable 【類似購物車效果,需要拖拽】
語法:$(selector).droppable({options}) 【selector引數為接收拖曳元素,options為方法的配置物件,在物件中,drop函式表示當被接收的拖曳元素完全進入接收元素的容器時,觸發該函式的呼叫。】
這裡寫圖片描述

3:拖拽排序外掛—-sortable
語法:$(selector).sortable({options})【selector引數為進行拖曳排序的元素,options為呼叫方法時的配置物件,delay:延時,opacity:透明度】
這裡寫圖片描述

4:面板摺疊外掛—-accordion 【類似“手風琴”的摺疊物件】
語法:$(selector).accordion({options}) 【引數selector為整個面板元素,options引數為方法對應的配置物件。】
這裡寫圖片描述

6:對話方塊外掛—-dialog 【用動畫的效果彈出多種型別的對話方塊】
語法:$(selector).dialog({options}) 【selector引數為顯示彈出對話方塊的元素,通常為div,options引數為方法的配置物件,在物件中可以設定對話方塊型別、“確定”、“取消”按鈕執行的程式碼等】
這裡寫圖片描述

7:選單工具外掛—-menu【可以通過ul建立多級內聯或彈出式選單,支援通過鍵盤方向鍵控制選單滑動,允許為選單的各個選項新增圖示】
語法:$(selector).menu({options}) 【selector引數為選單列表中最外層ul元素,options為menu()方法的配置物件。】
這裡寫圖片描述

8:微調按鈕外掛—-spinner
語法:$(selector).spinner({options}) 【selector引數為文字輸入框元素,可選項options引數為spinner()方法的配置物件,在該物件中,可以設定輸入的最大、最小值,獲取改變值和設定對應事件,spin:遞增/遞減事件(function(event,ui){},),change:按鈕值改變事件(function(event,ui){},)】
這裡寫圖片描述

9:工具提示外掛—-tooltip
語法:$(selector).tooltip({options}) 【selector為需要顯示提示資訊的元素,可選項引數options為tooltip()方法的配置物件,在該物件中,可以設定提示資訊的彈出(show:{})、隱藏(hide:{})時的效果和所在位置,動畫特效:effect:顯示/隱藏的方式】
.effect(effect,[options],[duration],[complete]) 【對一個元素應用的動畫特效。effect、一個字串,知指示要那一種特效,options、特效具體的設定和easing(指定動畫的行進速度),duration、一個字串或一個數字,指定動畫將執行多久,complete、動畫完成時要呼叫的函式】
這裡寫圖片描述

相關推薦

jquery Ajax應用常用外掛

1:load()非同步請求資料 語法:load(url,[data],[callback]) 【url為載入伺服器地址,可選項data引數為請求是傳送的資料,callback引數為資料請求成功之後,執行的回撥函式】 生成AJAX請求,並通過該請

Jquery AJAX POSTGET之間的區別

load wmb data col form put content lencod 2.4 Jquery AJAX POST與GET之間的區別 GET 就是一個相同的URL只有一個結果,瀏覽器直接就可以拿出來進行獲取,比如抓取接口get方式的內容,或者說直接獲取網

利用jquery ajax前端後端的檔案傳輸

首先了解下$ ajax裡面的各個屬性1.url: 要求為String型別的引數,(預設為當前頁地址)傳送請求的地址。2.type: 要求為String型別的引數,請求方式(post或get)預設為get。3.timeout: 要求為Number型別的引數,設定請求超時時間(毫

前端構建之gulp常用外掛

gulp是什麼? http://gulpjs.com/ 相信你會明白的! 與著名的構建工具grunt相比,有什麼優勢呢? 1. 易於使用,程式碼優於配置 2. 高效,不會產生過多的中間檔案,減少I/O壓力 3. 易於學習,API非常少,你能在很短

jquery +ajax 實現php後臺互動json資料

因為做了前段用jquery和ajax傳送post或get請求到後端伺服器,伺服器我是用nginx ,你也可以用apache, 後端技術使用php,例子很簡單,主要是理解了,擴充套件到複雜就沒有什麼問題。 程式碼給出,希望對大家有用: 這個是端html,你需要下載jquer

jquery-$.ajax提交$.get獲取資料

兩種常用到的資料互動方式,記錄一下避免忘記 $.ajax提交資料 $.ajax({ type : 'post',  //資料提交請求方式也可以使用get url : newUrl,  //資料提交地址

Centos7 搭建開源個人網盤Nextcloud常用外掛

    檔案伺服器,是一個公司最常用的服務應用,每個公司企業基本都有自己的檔案伺服器實,現儲存分享,上傳下載檔案文件等功能,常見的檔案伺服器就是ftp伺服器,但是ftp伺服器的功能實在有限,且對於普通使用者使用入手難度較大,又缺乏介面,對於公司的普通使用者來說,確實不是一個好

jqueryphp互動的ajax應用第一課:檢測使用者註冊時使用者名稱是否存在

當用戶註冊需要知道這個使用者名稱是否被人使用所以需要在使用者登陸前判斷 為了使使用者得到更好的體驗,我們使用了jquery的ajax效果,來使用者名稱是否存在。 首先需要一個新增年級的頁面,暫時叫grade.htm 這個檔案需要引入兩個檔案jquery.js(jquery

五滴水:使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計bootstrap外掛實現圖片輪播

前言嘚吧嘚 三天沒更博了,嘻嘻嘻打自己:3 最近的狀態比開始的時候好太多,能看懂cygwin和console上報的錯誤了,知道到底是縮進出了問題還是我的程式碼邏輯不完整了,找資源也知道哪裡是我要的,也可以找到想要的了·······慢慢來,給自己立個flag :

Jquery 頁面初始化常用的三種方法以及Jquery 發送ajax 請求

tree error 渲染 erro 發生 har 初始化 nload 事情 第一種 $(document).ready(function(){ //文檔就緒事件 }); 第二種是第一種的簡略寫法,效果上和第一種是等效的。 $(function(){ //文檔加載事

JQuery實現ajax技術的常用方法

this 鏈接 js實現 一個 nbsp cal 總結 emp 回調函數 在我的前一篇用js實現ajax的三種技術中,我提到了怎麽用原生的js代碼去實現ajax技術,但是 可以看到,代碼相對於來說還是比較多,在我們實際的開發中,我們用到的比較多的技術是用jqu

jquery ajax中successcomplete的執行順序

err 執行 stop 我們 -- jquer bsp con ucc jquery ajax中success與complete的執行順序 jquery中各個事件執行順序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件)

jQueryAjax應用

blank 異常 1.5 服務 進行 jquer UNC 根據 判斷 一、jQuery中$.Ajax()方法的參數 1、url #發送請求的地址 2、type #HTTP 請求方法(默認以GET發送) 可用值: -GET -POST

jquery ajax update panel

image info date 技術 update inf nbsp .com img 回調函數 jquery ajax 與 update panel

jQuery Ajax常用方法引數總結

$.ajax( { url: 提交請求的路徑 type: 請求方式,可為get或post,預設為get async: 是否非同步,true為非同步,false為同步,如果不寫預設為非同步 data: 要傳送的資料 success:function() 請求成功時回撥此

Asp.Net MVC WebAPI的建立前臺Jquery ajax後臺HttpClient呼叫詳解 Asp.Net中對操作Sql Server 簡單處理的SqlDB類

1、什麼是WebApi,它有什麼用途?           Web API是一個比較寬泛的概念。這裡我們提到Web API特指ASP.NET MVC Web API。在新出的MVC中,增加了WebAPI,用於提供REST風格的WebService,新生成的W

AJAX實現圖片上傳和預覽(傳統ajaxjQuery AJAX;帶圖片的表單提交)

  一、通過Servlet3.0和傳統的AJAX實現圖片上傳和預覽          此方法也適用於帶圖片的表單提交         上傳時預覽圖片    

常用 JS 外掛】01 jQuery Validation 表單驗證外掛

表單驗證框架 jQuery Validation 前端表單驗證框架 頁面引用 <!-- jQuery Validation 1.14.0 --> <script src="/static/assets/plugins/jquery-valida

sublime_text2/3常用外掛安裝解除安裝

sublime_text常用外掛安裝 1.開啟sublime text後按ctrl+shift+p。 2.在彈出的輸入框中輸入install Package回車。 3.在彈出的輸入框中輸入需要安裝的外掛名稱回車即可。 sublime_text常用外掛解除安裝 1.開

AJAX template-web.js (模板引擎) jquery.twbsPagination.js (分頁外掛) 的使用

模板引擎 分頁外掛 1.概念 模板引擎不屬於特定技術領域,它是跨領域跨平臺的概念。在Asp下有模板引擎,在PHP下也有模板引擎,在C#下也有,甚至JavaScript、WinForm開發都會用到模板引擎技術。 2.原理 置換型模板引擎實現簡單,但其效率低下,