Jquery李炎恢 51Ajax表單外掛程式 17

2021-07-22 04:46:42 字數 1288 閱讀 6941

學習要點:

1.核心方法

2.option引數

3.工具方法

傳統的表單提交,需要多次跳轉頁面,極大的消耗資源也缺乏良好的使用者體驗。而這款form.js表單的ajax提交外掛程式將解決這個問題。

一、核心方法

官方**:

form.js外掛程式有兩個核心方法:ajaxform()和ajaxsubmit(),它們集合了控制表單元素到決定如何管理提交進行的功能。

//ajaxform提交方式

$("#reg").ajaxform(function());

注意:使用ajaxform()方法,會直接實現ajax提交。自動阻止了預設行為。而它提交的預設頁面是form控制項的action屬性的值。提交的方式是method屬性的值。

//ajaxsubmit()提交方式

$("#reg").submit(function());

return false;

});注意:ajaxform()方法,是針對form直接提交的,所以阻止了預設行為。而ajaxsubmit()方法,由於是針對submit()方法的,所以需要手動阻止預設行為。而使用了validate.js驗證外掛程式,那麼ajaxsubmit()比較適合我們。

二、option引數

option引數是乙個以鍵值對傳遞的物件,可以通過這個物件,設定各種ajax提交的功能。

$("#reg").submit(function(),

beforesubmit:function(formdata,jqform,options),

success:function(respontext,statustext),

error:function(event,errortext,errortype),

});

return false;

});

三、工具方法

form.js除了提供兩個核心方法之外,還提供了一些常用的工具方法。這些方法主要是在提交前或後對資料或表單進行處理的。

//表單序列化

alert($("#reg").formserialize());

//序列化某乙個字段

alert($("#reg #user").fieldserialize());

//得到某個欄位的value值

alert($("#reg #user").fieldvalue());

//重置表單

$("#reg").resetform();

//清空某個字段

$("#reg #user").clearfields();

Jquery李炎恢 39按鈕UI 5

學習要點 1.使用button按鈕 2.修改button樣式 3.button 方法的屬性 4.butto action param 5.單選 複選按鈕 按鈕可以給生硬的原生按鈕或者文字提供更多豐富多彩的外觀,它不單單可以設定按鈕或文字,還可以設定單選按鈕和多選按鈕 一 使用button按鈕 使用b...

Jquery李炎恢 50驗證登錄檔單 16

學習要點 1.html部分 2.css部分 3.jquery部分 本節課,將使用validate.js驗證外掛程式功能,完成表單註冊驗證的功能。一 html部分 html部分不需要更改太多,只要加個存放錯誤提示的列表標籤即可。二 css部分 css部分主要是成功後引入一張小圖示,還有錯誤列表樣式。r...

Jquery李炎恢 58編輯器外掛程式 24

學習要點 1.編輯器簡介 2.引入ueditor 編輯器,一般用於類似於word一樣的文字編輯器,只不過是編輯為html格式的。分為純js型別的,還有jquery外掛程式型別的。一 編輯器簡介 我們使用的jquery版本比較新,但尚未全面使用2.0的版本,因為ie6,7,8被拋棄了。而恰恰在這個時期...