1. 程式人生 > >easyui form 表單提交兩種方式

easyui form 表單提交兩種方式

easyui form表單提交資料的兩種方式

第一種

	$('#admin_yhgl_addUserForm').form('submit', {
		url : 'userAction!add.action',
		data : {
			name : $('#admin_yhgl_addUserForm input[name=name]').val(),
			pwd : $('#admin_yhgl_addUserForm input[name=pwd]').val()
		},
		success : function(data) {
			var obj = jQuery.parseJSON(data);
			console.info(obj);
			if (obj.success) {
				addUserDialog.dialog('close');
			}
			$.messager.show({
				title : '提示',
				msg : obj.msg,
				timeout : 3000,
				showType : 'slide'
			});

		}

	});

這種方式需要將form中的數值單個賦值,用到jquery 資料選擇器進行單個選擇,當form中個數比較多時,則較為繁瑣,但是程式碼易讀,當程式執行完畢則會呼叫success方法,

返回的obj資料樣式為 {"msg":"新增成功","success":true}

第二種方式採用ajax提交,比較簡便,個人比較推薦

// 第二種後臺互動方式 ajax提交
	if ($('#admin_yhgl_addUserForm').form('validate')) {
		$.ajax({
			url : 'userAction!add.action',
			data : $("#admin_yhgl_addUserForm").serialize(),
			dataType : 'json',
			success : function(obj, textStatus, jqXHR) {
				if (obj.success) {
					addUserDialog.dialog('close');
				}
				$.messager.show({
					title : '提示',
					msg : obj.msg,
					timeout : 3000,
					showType : 'slide'
				});
			}
		});
	} else {
		alert('驗證失敗');
	}
data : $("#admin_yhgl_addUserForm").serialize() 將form中的資料序列化,只要action中變數和前臺變數名稱一致,則就會接收到值,
表單提交之前先進行驗證