JQuery EasyUI 表单

时间：2023-03-08 17:28:06

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>

相关文章