1. 程式人生 > >利用ajaxSubmit()實現Form表單submit()提交後的回撥函式

利用ajaxSubmit()實現Form表單submit()提交後的回撥函式

1、引入JQuery Form表單的js

<script type="text/javascript" src="${ctxStatic}/common/jquery.form.js"></script>

2.設定相應的引數

$(function(){
    // 1.基本引數設定 
    var options = { 
        type: 'POST',     // 設定表單提交方式
        url: "${ctx}/jinzhu/dtUser/save",    // 設定表單提交URL,預設為表單Form上action的路徑
        dataType: 'json',    // 返回資料型別
        beforeSubmit: function(formData, jqForm, option){    // 表單提交之前的回撥函式,一般使用者表單驗證
            // formData: 陣列物件,提交表單時,Form外掛會以Ajax方式自動提交這些資料,格式Json陣列,形如[{name:userName, value:admin},{name:passWord, value:123}]
            // jqForm: jQuery物件,,封裝了表單的元素   
            // options: options物件
            var str = $.param(formData);    // name=admin&passWord=123
            var dom = jqForm[0];    // 將jqForm轉換為DOM物件
            var name = dom.name.value;    // 訪問jqForm的DOM元素
            /* 表單提交前的操作 */
            return true;  // 只要不返回false,表單都會提交  
        },
        success: function(responseText, statusText, xhr, $form){    // 成功後的回撥函式(返回資料由responseText獲得)
            if (responseText.status == '1') {
                alert("操作成功!" + responseText.msg);
                /* 成功後的操作 */
            } else {
                alert("操作失敗!" + responseText.msg);    // 成功訪問地址,併成功返回資料,由於不符合業務邏輯的失敗
            }
        },  
        error: function(xhr, status, err) {            
            alert("操作失敗!");    // 訪問地址失敗,或發生異常沒有正常返回
        },
        clearForm: true,    // 成功提交後,清除表單填寫內容
        resetForm: true    // 成功提交後,重置表單填寫內容
    }; 
    
    // 2.繫結ajaxSubmit()
    $("#inputForm").submit(function(){     // 提交表單的id
        $(this).ajaxSubmit(options); 
        return false;   //防止表單自動提交
    });
});

3、專案中使用--示例(基於Jeeplus)

var validateForm;
function doSubmit(){//回撥函式,在編輯和儲存動作時,供openDialog呼叫提交表單。 
    if(validateForm.form()){
        $("#inputForm").submit();
        return true;
    }	 
    return false;
}

$(document).ready(function() {
    validateForm = $("#inputForm").validate();
});

$(function(){	
    var options = { 
        type: 'POST',
        success:showResponse,  
        dataType: 'json',
        error : function(xhr, status, err) {			
            alert("操作失敗");
        }
    }; 

    $("#inputForm").submit(function(){ 
        $(this).ajaxSubmit(options); 
        return false;   //防止表單自動提交
        });
});
		
function showResponse(responseText, statusText, xhr, $form){ 
    if (responseText.success == true) {
        parent.layer.msg(responseText.msg, {icon:6});
    } else {
        parent.layer.msg(responseText.msg, {icon:5});
    }
}