javascript表單的Ajax 提交外掛程式的使用

標籤：.com   blog   aaa   option   ons   strong   傳遞   php   對象   

Ajax 提交外掛程式

form.js 表單的：官方網站：http://malsup.com/jquery/form/

form.js 外掛程式有兩個核心方法：ajaxForm()和ajaxSubmit()，它們集合了從控製表單元素
到決定如何管理提交進行的功能。

//ajaxForm 提交方式$(‘#reg‘).ajaxForm(function () {　　alert(‘提交成功！‘);});

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

//ajaxSubmit()提交方式$(‘#reg‘).submit(function () {　　　　$(this).ajaxSubmit(function () {　　　　alert(‘提交成功！‘);　　});　　return false;});

注意：ajaxForm()方法，是針對form 直接提交的，所以阻止了預設行為。而ajaxSubmit()
方法，由於是針對submit()方法的，所以需要手動阻止預設行為。

option 參數

option 參數是一個以索引值對傳遞的對象，可以通過這個對象，設定各種Ajax 提交的功
能。

$(‘#reg‘).submit(function () {　　$(this).ajaxSubmit({　　　　url : ‘test.php‘, //設定提交的url，可覆蓋action 屬性　　　　target : ‘#box‘, //伺服器返回的內容存放在#box 裡　　　　type : ‘POST‘, //GET,POST　　　　dataType : null, //xml,json,script，預設為null　　　　clearForm : true, //成功提交後，清空表單　　　　resetForm : true, //成功提交後，重設表單　　　　data : { //增加額外的資料提交　　　　aaa : ‘bbb‘,　　　　ccc : ‘ddd‘.　　},　　beforeSubmit : function (formData, jqForm, options) {　　　　alert(formData[0].name); //得到傳遞表單元素的name　　　　alert(formData[0].value); //得到傳遞表單元素的value　　　　alert(jqForm); //得到form 的jquery 對象　　　　alert(options); //得到目前options 設定的屬性　　　　alert(‘正在提交中！！！‘);　　　　return true;　　},　　success : function (responseText, statusText) {　　　　alert(responseText + statusText); //成功後回調　　},　　error : function (event, errorText, errorType) { //錯誤時調用　　　　　alert(errorText + errorType);　　　　},　　});　　return false;});

工具方法

//表單序列化alert($(‘#reg‘).formSerialize());//序列化某一個欄位alert($(‘#reg #user‘).fieldSerialize());//得到某個欄位的value 值alert($(‘#reg #user‘).fieldValue());//重設表單$(‘#reg‘).resetForm()

 

javascript表單的Ajax 提交外掛程式的使用