jQuery EasyUI 表單插件 – Form 表單

jQuery EasyUI 表單插件 - Form 表單

jQuery EasyUI 插件

用法

創(chuàng)建一個(gè)簡單的 HTML 表單。構(gòu)建表單并給 id、action、method 賦值。

<form id="ff" method="post">
    <div>
		<label for="name">Name:</label>
		<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
    </div>
    <div>
		<label for="email">Email:</label>
		<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
    </div>
    ...
</form>

讓表單（form）成為 ajax 提交的表單（form）

$('#ff').form({
    url:...,
    onSubmit: function(){
		// do some check
		// return false to prevent submit;
    },
    success:function(data){
		alert(data)
    }
});
// submit the form
$('#ff').submit();

去做一個(gè)提交動作

// call 'submit' method of form plugin to submit the form
$('#ff').form('submit', {
    url:...,
    onSubmit: function(){
		// do some check
		// return false to prevent submit;
    },
    success:function(data){
		alert(data)
    }
});

通過額外的參數(shù)提交

$('#ff').form('submit', {
    url:...,
    onSubmit: function(param){
		param.p1 = 'value1';
		param.p2 = 'value2';
    }
});

處理提交響應(yīng)

提交一個(gè) ajax 表單（form）是非常簡單的。當(dāng)提交完成時(shí)用戶可以獲得響應(yīng)數(shù)據(jù)。請注意，響應(yīng)數(shù)據(jù)是來自服務(wù)器的原始數(shù)據(jù)。對響應(yīng)數(shù)據(jù)的解析動作要求獲得正確的數(shù)據(jù)。

例如，響應(yīng)數(shù)據(jù)假設(shè)是 JSON 格式，一個(gè)典型的響應(yīng)數(shù)據(jù)如下所示：

{
    "success": true,
    "message": "Message sent successfully."
}

現(xiàn)在在 'success' 回調(diào)函數(shù)中處理 JSON 字符串。

$('#ff').form('submit', {
    success: function(data){
		var data = eval('(' + data + ')'); // change the JSON string to javascript object
		if (data.success){
			alert(data.message)
		}
    }
});

屬性

事件

方法

$.messager.progress();	// display the progress bar
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// hide progress bar while the form is invalid
		}
		return isValid;	// return false will stop the form submission
	},
	success: function(){
		$.messager.progress('close');	// hide progress bar while submit successfully
	}
});

$('#ff').form('load','get_data.php');	// load from URL

$('#ff').form('load',{
	name:'name2',
	email:'mymail@gmail.com',
	subject:'subject2',
	message:'message2',
	language:5
});

jQuery EasyUI 插件