jEasyUI は非同期送信フォームを作成します


このチュートリアルでは、easyui を通じてフォーム (Form) を送信する方法を示します。名前、メールアドレス、電話番号のフィールドを含むフォームを作成します。 easyui フォーム プラグインを使用して、フォームを ajax フォームに変更します。フォームはすべてのフィールドをバックエンド サーバーに送信し、サーバーは一部のデータを処理してフロントエンド ページに送り返します。戻りデータを受信して​​表示します。

117.png

フォーム(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');
		}
	});

サーバーサイドコード

form1_proc.php
	$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