隐藏

EasyUI Ajax 表单

发布:2013/5/5 15:36:45作者:管理员 来源:本站 浏览次数:1640

 

这个教程显示如何发送表单。我们创建一个例子表单:nameemailphone字段。使用easyui表单插件,我们可以将表单变成ajax表单。表单发送所有的字段到后台处理服务,服务处理和发送一些数据返回前台网页。我们收到返回的数据后显示他。
创建form

<divstyle="width:230px;background:#E0ECFF;padding:10px;">

    <formid="ff"action="/demo5/ProcessServlet"method="post">

        <table>

            <tr>

                <td>Name:</td>

                <td><inputname="name"type="text"></input></td>

            </tr>

            <tr>

                <td>Email:</td>

                <td><inputname="email"type="text"></input></td>

            </tr>

            <tr>

                <td>Phone:</td>

                <td><inputname="phone"type="text"></input></td>

            </tr>

            <tr>

                <td></td>

                <td><inputtype="submit"value="Submit"></input></td>

            </tr>

        </table>

    </form>

</div>


转换成Ajax表单
我们写一些jquery代码使表单以ajax方式发送。注意,当数据返回时,form插件的success函数激发,所以我们可以处理一点事情。

$('#ff').form({

    success:function(data){

        $.messager.alert('Info', data, 'info');

    }

});

服务处理:

protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

    // TODO Auto-generated method stub

    String name = request.getParameter("name");

    String email = request.getParameter("email");

    String phone = request.getParameter("phone");

    System.out.println(name+":"+email+":"+phone);

    PrintWriter out = response.getWriter();

    out.print("Name:"+name+"<br/>Email:"+email+"<br/>Phone:"+phone);

    out.flush();

    out.close();

}

当我们点击发送按钮时,可以看到;