jEasyUI建立非同步提交表單

本教學向您展示如何透過 easyui 提交一個表單（Form）。我們建立一個帶有 name、email 和 phone 欄位的表單。透過使用 easyui 表單（form）外掛程式來改變表單（form）為 ajax 表單（form）。表單（form）提交所有欄位到後台伺服器，伺服器處理和發送一些資料返回前端頁面。我們接收返回數據，並將它顯示出來。

建立表單（Form）

	<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
	<form id="ff" action="form1_proc.php" method="post">
		<table>
			<tr>
				<td>Name:</td>
				<td><input name="name" type="text"></input></td>
			</tr>
			<tr>
				<td>Email:</td>
				<td><input name="email" type="text"></input></td>
			</tr>
			<tr>
				<td>Phone:</td>
				<td><input name="phone" type="text"></input></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Submit"></input></td>
			</tr>
		</table>
	</form>

改變為Ajax 表單

	$('#ff').form({
		success:function(data){
			$.messager.alert('Info', data, 'info');
		}
	});

伺服器端程式碼

	$name = $_POST['name'];
	$email = $_POST['email'];
	$phone = $_POST['phone'];

	echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

下載jQuery EasyUI 實例

jeasyui-form-form1.zip