EXT提交表单

最新推荐文章于 2022-05-14 11:25:47 发布
最新推荐文章于 2022-05-14 11:25:47 发布
阅读量94 收藏
点赞数
分类专栏： 数据传递 文章标签： javascript json ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_8039/article/details/82571496
版权

EXT的form表单ajax提交（默认提交方式）   相对单独的ajax提交来说优点在于能省略写参数数组 将按钮添加单击事件   表单验证登陆

  ------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>    

<head>         

   <title>New Document</title>         

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        

   <link rel="stylesheet"   type="text/css"    href="lib/ext/resources/css/ext-all.css" />         

   <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js">         </script>         

   <script type="text/javascript" src="lib/ext/ext-all.js">         </script>    

</head>

<body>         

<script> 

     Ext.onReady(function(){   

             //编码方式 

            Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';          

         //使用表单提示           

            Ext.QuickTips.init();           

            Ext.form.Field.prototype.msgTarget = 'side';                 

         //定义表单           

            var simple = new Ext.FormPanel({            

                     labelWidth: 75,                      

                     baseCls: 'x-plain',            

                     defaults: {width: 150},             

                     defaultType: 'textfield',//默认字段类型

 

                //定义表单元素            

                    items: [{                   

                             fieldLabel: '帐户',                  

                             name: 'name',//元素名称                   

                             //anchor:'95%',//也可用此定义自适应宽度                  

                             allowBlank:false,//不允许为空                   

                             blankText:'帐户不能为空'//错误提示内容               

                             },{ 

                             inputType:'password',                  

                             fieldLabel: '密码',                  

                             //anchor:'95%',                  

                             name: 'pws',                   

                             allowBlank:false,                 

                             blankText:'密码不能为空'              

                             }],

                     buttons: [{            

                             text: '登陆',        

                             type: 'submit',         

                          //定义表单提交事件         

                             handler:function(){ 

        if(simple.form.isValid()){//验证合法后使用加载进度条                 

             Ext.MessageBox.show({                        

                    title: '请稍等',                          

                    msg: '正在加载...',                        

                    progressText: '',                      

                    width:300,                   

                    progress:true,                   

                    closable:false,               

                    animEl: 'loding'             

             });                       

      //控制进度速度                   

          var f = function(v){             

                    return function(){                    

                           var i = v/11;                       

                            Ext.MessageBox.updateProgress(i, '');            

                    };               

             };

        for(var i = 1; i < 13; i++){                       

            setTimeout(f(i), i*150);              

         }                                      

         //提交到服务器操作      

         simple.form.doAction('submit',{   

        PrintWriter out = null;       

        try {             

              out = response.getWriter();       

        } catch (IOException e) {          

              e.printStackTrace();    

        }         

    // 得到页面传过来的参数        

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

       String password = request.getParameter("pws");      

       System.out.println("用户名：" + username);        

       System.out.println("密码：" + password);       

    // 请求判断         

       String msg = null;       

        if (username.trim().equals("admin") && password.trim().equals("123")) {           

            msg = "ok";      

         } else {             

            msg = "你的帐户或密码错误";  

         }         

     // 初始化       

        Map map = new HashMap();    

        map.put("success", true);        

        map.put("msg", msg);       

    // 转换成对象，不要转换成数组    

        JSONObject obj = JSONObject.fromObject(map);       

    //          System.out.println(obj);        

    // 输出到列表       

        out.print(obj);      

        return null; 

    }    

iteye_8039
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ext 表单提交
脉兜
02-26 103
上个ext表单提交的例子，用servlet作为表单的服务器验证，当用户名和密码相同时，提示验证通过，否则提示验证失败。（附例子） 帖出ext表单布局代码 [code="js"] Ext.onReady(function(){ // 编码方式 Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8'; // 使用表单提示 ...
Ext_表单提交
66
04-11 3365
<!-- Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = side; var config = { title:表单提交示例,
ext 中的表单提交
guohui_fz
10-15 313
buttons: [{ text: '下一步', handler:function(){ top.getForm().submit( { url: '../hj.do', method:'po...
Ext手动对表单进行提交
苍茫云海间
08-03 102
typeInfoForm.getForm().submit({ url : '/manage/TypeInfoManageAction.do', method : 'post', params:{ flag:'save', parentId:typeInfo.parentId }, waitMsg : '正在发送数据，请稍后...', success : funct...
ExtJs中提交表单的四种方式
hyx153183740的博客
05-14 624
ExtJs中提交表单的五种方式第一种 Ajax提交方式第二种 Ajax-Html提交方式第三种 Ext.FormPanel 提交方式第四种 Ext.Window 提交方式第五种 将html的表单转化为ext的表单提交方式 第一种 Ajax提交方式 这种方式需要直接使用ext Ajax方法进行提交 使用这种方式，需要将待传递的参数进行封装。 function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_s
EXT提交表单，ASP.NET
05-06
当我们讨论EXT提交表单与ASP.NET的结合时，主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件（FormPanel）来创建和处理用户输入，而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...
ext form 表单提交数据的方法小结
09-06
在这个例子中，`doAction`方法用于提交表单，参数`'submit'`表示要执行的动作。`url`定义了服务器端处理请求的地址，`method`设置提交方式，通常是`'post'`。`success`和`failure`函数分别处理服务器返回的成功和...
EXT异步提交FORM表单
08-18
在现代Web应用开发中，异步提交表单是一种常见的技术手段，它能够提升用户体验，减少页面刷新带来的数据丢失风险，并能有效提高系统的响应速度。EXT框架（通常指的是Ext JS）作为一种成熟且功能丰富的JavaScript库，...
Ext 表单布局实例代码
09-06
`frame`属性为表单添加边框，`width`设置了表单的宽度，`url`则是表单数据提交的地址。`items`数组包含了所有表单字段和子容器。 此外，`htmlEdt`是`Ext.form.HtmlEditor`的实例，它提供了一个富文本编辑器，允许...
extJs 4种异步提交
loser
12-05 1171
/**   *    * 第一种Ajax提交方式   *    *    * 这种方式需要直接使用ext Ajax方法进行提交   *    *    * 使用这种方式，需要将待传递的参数进行封装   *    *    * @return   */   function saveUser_ajaxSubmit1() {       Ext.Ajax.request(
ext js 中表单提交方式总结
小邓的专栏
04-25 2087
1.form提交：    if (newFs.form.isValid()) { newFs.form.doAction('submit', { url : 'agentServ!save.action', waitMsg : '保存中...', method : 'post', params : '',
Extjs的Form表单提交方式
zyjustin9的专栏
09-19 1672
Extjs的Form表单提交方式 一.直接提交：url写在表单中 var addForm = new Ext.FormPanel({ frame: true, url:"insertProject.eva?doType=insertProject", labelWidth: 80, //labelAlign: "right", //buttonAlign:"center"...
Ext2中form提交
yuejun13的专栏
04-09 202
使用ext2中的form 照文档上的来做始终无法成功 [code="js"] onSubmit: Ext.emptyFn, submit: function() { this.getEl().dom.action='form.jsp'; this.getEl().dom.submit(); } [/code] 这样写，虽然后台程序可以获取值但无法将信息返回页面，原因还不知...
Ext中弹出框的form表单提交和接收返回数据
coco_ethan的专栏
11-23 4837
今日在编写Ext的弹出框时，碰到需要提交到后台action，然后判断返回的数据。还是跟以前那样直接用success: function(response, options) { var res=Ext.util.JSON.decode(response.responseText); // 进行判断操作。。。。 } ！！！   这样会接收不要返回的response里面的数据，
ExtJs中form表单提交的三种方式
weixin_34019144的博客
11-30 348
第一种： function login(){ formServer.form.submit();//提交 } function reset(){ formServer.form.reset();//取消 } var formServer=new Ext.FormPanel({ ...
ExtJs中的表单提交和页面弹出表单
热门推荐
hanhan313的专栏
11-12 2万+
1.表单提交 代码：   form.jsp页面： form id="panel22"action="getTest.jsp" method="post">form>   form.js： //创建表单面板 var MyformPanel=Ext.create('Ext.form.Panel', { frame: true,
extjs设置表单提交
最新发布
07-12
在 ExtJS 中设置表单提交可以通过以下步骤完成： 1. 创建一个表单组件： ```javascript var form = Ext.create('Ext.form.Panel', { id: 'myForm', url: 'submit.php', // 表单提交的URL standardSubmit: false,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值