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();

}

当我们点击发送按钮时，可以看到；

巴特西

EasyUI Ajax 表单

最新文章

热门文章