jQuery Ajax應用與常用插件

bingchen 發(fā)布于2019-08-21 12:00 / 2585人閱讀

jQuery 實現(xiàn)Ajax應用 使用load()方法異步請求數(shù)據(jù)

使用load()方法通過Ajax請求加載服務器中的數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中，它的調(diào)用格式為：

load(url,[data],[callback])

參數(shù)url為加載服務器地址，可選項data參數(shù)為請求時發(fā)送的數(shù)據(jù)，callback參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)

使用getJSON()方法異步加載JSON格式數(shù)據(jù)

使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數(shù)據(jù)，并對獲取的數(shù)據(jù)進行解析，顯示在頁面中，它的調(diào)用格式為：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url參數(shù)為請求加載json格式文件的服務器地址，可選項data參數(shù)為請求時發(fā)送的數(shù)據(jù)，callback參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)

使用getScript()方法異步加載并執(zhí)行js文件

使用getScript()方法異步請求并執(zhí)行服務器中的JavaScript格式的文件，它的調(diào)用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

參數(shù)url為服務器請求地址，可選項callback參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)

使用get()方法以GET方式從服務器獲取數(shù)據(jù)

使用get()方法時，采用GET方式向服務器請求數(shù)據(jù)，并通過方法中回調(diào)函數(shù)的參數(shù)返回請求的數(shù)據(jù)，它的調(diào)用格式如下：

$.get(url,[callback])

參數(shù)url為服務器請求地址，可選項callback參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)

使用post()方法以POST方式從服務器發(fā)送數(shù)據(jù)

post()方法用于以POST方式向服務器發(fā)送數(shù)據(jù)，服務器接收到數(shù)據(jù)之后，進行處理，并將處理結(jié)果返回頁面，調(diào)用格式如下：

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

參數(shù)url為服務器請求地址，可選項data為向服務器請求時發(fā)送的數(shù)據(jù)，可選項callback參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)

使用serialize()方法序列化表單元素值

使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用于ajax請求，它的調(diào)用格式如下：

$(selector).serialize()

其中selector參數(shù)是一個或多個表單中的元素或表單元素本身

使用ajax()方法加載服務器數(shù)據(jù)

使用ajax()方法是最底層、功能最強大的請求服務器數(shù)據(jù)的方法，它不僅可以獲取服務器返回的數(shù)據(jù)，還能向服務器發(fā)送請求并傳遞數(shù)值，它的調(diào)用格式如下：

jQuery.ajax([settings])或$.ajax([settings])

其中參數(shù)settings為發(fā)送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data為請求時傳遞的數(shù)據(jù)，dataType為服務器返回的數(shù)據(jù)類型，success為請求成功的執(zhí)行的回調(diào)函數(shù)，type為發(fā)送數(shù)據(jù)請求的方式，默認為get



    
        使用ajax()方法加載服務器數(shù)據(jù)
        
        
    
    
    
        
            
                檢測數(shù)字的奇偶性 
                
                    
                
            
            
               請求輸入一個數(shù)字

使用ajaxSetup()方法設置全局Ajax默認選項

使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成后，后面的Ajax請求將不需要再添加這些選項值，它的調(diào)用格式為：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可選項options參數(shù)為一個對象，通過該對象設置Ajax請求時的全局選項值

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請求發(fā)出前觸發(fā)函數(shù)，ajaxStop()方法用于在Ajax請求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，兩個方法中括號都是綁定的函數(shù)，當發(fā)送Ajax請求前執(zhí)行ajaxStart()方法綁定的函數(shù)，請求成功后，執(zhí)行ajaxStop ()方法綁定的函數(shù)

jQuery 常用插件 表單驗證插件——validate

該插件自帶包含必填、數(shù)字、URL在內(nèi)容的驗證規(guī)則，即時顯示異常信息，此外，還允許自定義驗證規(guī)則，插件調(diào)用方法如下：

$(form).validate({options})

其中form參數(shù)表示表單元素名稱，options參數(shù)表示調(diào)用方法時的配置對象，所有的驗證規(guī)則和異常信息顯示的位置都在該對象中進行設置

表單插件——form

通過表單form插件，調(diào)用ajaxForm()方法，實現(xiàn)ajax方式向服務器提交表單數(shù)據(jù)，并通過方法中的options對象獲取服務器返回數(shù)據(jù)，調(diào)用格式如下：

$(form). ajaxForm ({options})

其中form參數(shù)表示表單元素名稱；options是一個配置對象，用于在發(fā)送ajax請求過程，設置發(fā)送時的數(shù)據(jù)和參數(shù)

圖片燈箱插件——lightBox

該插件可以用圓角的方式展示選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，調(diào)用格式如下：

$(linkimage).lightBox({options})

其中l(wèi)inkimage參數(shù)為包含圖片的元素名稱，options為插件方法的配置對象

圖片放大鏡插件——jqzoom

在調(diào)用jqzoom圖片放大鏡插件時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當鼠標在小圖片中移動時，調(diào)用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區(qū)域，從而實現(xiàn)放大鏡的效果，調(diào)用格式如下：

$(linkimage).jqzoom({options})

其中l(wèi)inkimage參數(shù)為包含圖片的元素名稱，options為插件方法的配置對象

cookie插件——cookie

使用cookie插件后，可以很方便地通過cookie對象保存、讀取、刪除用戶的信息，還能通過cookie插件保存用戶的瀏覽記錄，它的調(diào)用格式為：

保存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)

其中參數(shù)key為保存cookie對象的名稱，value為名稱對應的cookie值

搜索插件——autocomplete

搜索插件的功能是通過插件的autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定后的插件將返回與字符相近的字符串提示選擇，調(diào)用格式如下：

$(textbox).autocomplete(urlData,[options]);

其中，textbox參數(shù)為文本框元素名稱，urlData為插件返回的相近字符串數(shù)據(jù)，可選項參數(shù)options為調(diào)用插件方法時的配置對象

右鍵菜單插件——contextmenu

右鍵菜單插件可以綁定頁面中的任意元素，綁定后，選中元素，點擊右鍵，便通過該插件彈出一個快捷菜單，點擊菜單各項名稱執(zhí)行相應操作，調(diào)用代碼如下：

$(selector).contextMenu(menuId,{options});

Selector參數(shù)為綁定插件的元素，meunId為快捷菜單元素，options為配置對象

自定義對象級插件——lifocuscolor插件

自定義的lifocuscolor插件可以在

元素移動時，自定義其獲取焦點時的背景色，即定義

元素選中時的背景色，調(diào)用格式為：

$(Id).focusColor(color)

其中，參數(shù)Id表示

元素選中時的背景色

自定義類級別插件—— twoaddresult

通過調(diào)用自定義插件twoaddresult中的不同方法，可以實現(xiàn)對兩個數(shù)值進行相加和相減的運算，導入插件后，調(diào)用格式分別為：

$.addNum(p1,p2) 和 $.subNum(p1,p2)

上述調(diào)用格式分別為計算兩數(shù)值相加和相減的結(jié)果，p1和p2為任意數(shù)值