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