利用ajaxSubmit()實現Form表單submit()提交後的回撥函式
阿新 • • 發佈:2019-01-01
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}); } }