EasyUI 創建異步提交表單

♦ 通過使用 easyui 表單插件來改變表單為 ajax表單。

　　表單提交所有字段到後臺服務器，服務器處理和發送一些數據返回到前端頁面。我們接收返回數據，並將它顯示出來。

♦ 創建表單（Form

<div class="easyui-panel" title="註冊" style="width:500px;" align="center">
        <div style="padding:10px 60px 20px 60px;">
        <form id="ff" method
 
="post" action="EmpServlet?m=regist">
            <table cellpadding="5" style="width:300px;">
                <tr>
                    <td>員工編號:</td>
                    <td><input class="easyui-textbox" type="text" name="empid"></input></td>
                </
 
tr>
                <tr>
                    <td>員工姓名:</td>
                    <td><input class="easyui-textbox" id="name" type="text" name="name"></input></td>
                </tr>
                <tr>
                    <td>所在部門:</
 
td>
                    <td>
                        <input id="deptid" class="easyui-combobox" name="deptid"  
                        data-options="valueField:‘deptid‘,textField:‘deptname‘,url:‘DeptServlet‘" />  
                    </td>
                </tr>
                <tr>
                    <td>登錄密碼:</td>
                    <td><input class="easyui-textbox" type="password" name="password"></input></td>
                </tr>
                <tr>
                    <td><input type="submit" value="註冊" class="easyui-linkbutton" id="btn_submit"></td>
                </tr>
            </table>    
        </form>
        </div>
    </div>

♦ 改變為 Ajax 表單

<script type="text/javascript">
    $(function(){
        $("#ff").form({
            success:function(data){
                $.messager.alert("提示","註冊成功！","icon-man",function(){
                    window.location.href="login.jsp";
                });
            }
        })
    })    
</script>

JQuery EasyUI 表單