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

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

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

創(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 實(shí)例

jeasyui-form-form1.zip