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

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

本節(jié)將向您展示如何通過jQuery 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