jQuery EasyUI フォーム -非同期送信フォームの作成

このチュートリアルでは、easyui を使用してフォーム（Form）を送信する方法を紹介します。name、email、phone フィールドを持つフォームを作成します。easyui フォーム（form）プラグインを使用して、フォーム（form）を Ajax フォーム（form）に変更します。フォーム（form）はすべてのフィールドをバックエンドサーバーに送信し、サーバーは処理して一部のデータをフロントエンドページに返します。返されたデータを受け取り、表示します。

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

サーバーサイドのコード

    $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