jQuery Ajax應(yīng)用與常用插件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$.get(url,[callback])

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

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

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

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

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

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

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

$(selector).serialize()

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

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

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

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

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



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

使用ajaxSetup()方法設(shè)置全局Ajax默認(rèn)選項(xiàng)

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

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

可選項(xiàng)options參數(shù)為一個(gè)對(duì)象，通過該對(duì)象設(shè)置Ajax請(qǐng)求時(shí)的全局選項(xiàng)值

使用ajaxStart()和ajaxStop()方法

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

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

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

jQuery 常用插件 表單驗(yàn)證插件——validate

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

$(form).validate({options})

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

表單插件——form

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

$(form). ajaxForm ({options})

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

圖片燈箱插件——lightBox

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

$(linkimage).lightBox({options})

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

圖片放大鏡插件——jqzoom

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

$(linkimage).jqzoom({options})

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

cookie插件——cookie

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

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

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

搜索插件——autocomplete

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

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

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

右鍵菜單插件——contextmenu

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

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

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

自定義對(duì)象級(jí)插件——lifocuscolor插件

自定義的lifocuscolor插件可以在

元素移動(dòng)時(shí)，自定義其獲取焦點(diǎn)時(shí)的背景色，即定義

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

$(Id).focusColor(color)

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

元素選中時(shí)的背景色


    
        
            對(duì)象級(jí)別的插件
        
        
            
                橘子水果
                芹菜蔬菜
                香蕉水果

自定義類級(jí)別插件—— twoaddresult

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

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

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


    
        
            自定義類級(jí)別插件 
            
                
            
        
        
            兩數(shù)相減：
            
            -
            
            =