zoukankan      html  css  js  c++  java
  • EasyUI Ajax 表单

    创建form

    <divstyle="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();
    
    }
    
    

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

  • 相关阅读:
    Element.scrollIntoView()
    dot.js
    微信小程序页面跳转导航wx.navigateTo和wx.redirectTo
    小程序swiper 滑块视图容器
    小程序表单提交
    自适应宽度圆角导航如何实现
    PC端和移动端一些奇葩兼容性问题
    如何实现两行内容增多和一行内容增多,多余的内容显示省略号
    表单提交判断,数据只能提交一次判断
    改变CSS世界纵横规则的writing-mode属性
  • 原文地址:https://www.cnblogs.com/huangf714/p/5911792.html
Copyright © 2011-2022 走看看