jQuery EasyUI 表單 - 創(chuàng)建異步提交表單

本教程向您展示如何通過 easyui 提交一個表單（Form）。我們創(chuàng)建一個帶有 name、email 和 phone 字段的表單。通過使用 easyui 表單（form）插件來改變表單（form）為 ajax 表單（form）。表單（form）提交所有字段到后臺服務(wù)器，服務(wù)器處理和發(fā)送一些數(shù)據(jù)返回到前端頁面。我們接收返回數(shù)據(jù)，并將它顯示出來。

創(chuàng)建表單（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>

改變?yōu)?Ajax 表單

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

服務(wù)器端代碼

	$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