• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    extJS中常用的4种Ajax异步提交方式

    发布者: 晋3555 | 发布时间: 2025-8-13 19:30| 查看数: 37| 评论数: 0|帖子模式

    /**

    * 第一种Ajax提交方式
    * 这种方式需要直接使用ext Ajax方法进行提交
    * 使用这种方式,需要将待传递的参数进行封装
    * @return
    */
    function saveUser_ajaxSubmit1() {
    Ext.Ajax.request( {
    url : 'user_save.action',
    method : 'post',
    params : {
    userName : document.getElementById('userName').value,
    password : document.getElementById('password').value
    },
    success : function(response, options) {
    var o = Ext.util.JSON.decode(response.responseText);
    alert(o.msg);
    },
    failure : function() {
    }
    });
    }
    /**
    * 第二种Ajax提交方式
    * 这种方式将为ext的ajax指定一个html表单
    * 使用这种方式,不需要将待传递的参数进行封装
    *
    * @return
    */
    function saveUser_ajaxSubmit2() {
    Ext.Ajax.request( {
    url : 'user_save.action',
    method : 'post',
    form : 'userForm', // 指定表单
    success : function(response, options) {
    var o = Ext.util.JSON.decode(response.responseText);
    alert(o.msg);
    },
    failure : function() {
    }
    });
    }
    /**
    * 第三种Ajax提交方式
    * 这种方式将为ext的自己的表单进行提交
    * 使用这种方式,需要使用ext自己的textField组件
    *
    * @return
    */
    function saveUser_ajaxSubmit3() {
    // 定义表单
    var formPanel = new Ext.FormPanel( {
    labelWidth : 75,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    width : 350,
    defaults : {
    width : 230
    },
    defaultType : 'textfield',
    items : [ {
    fieldLabel : '用户名',
    name : 'userName',
    allowBlank : false
    }, {
    fieldLabel : '密 码',
    name : 'password'
    } ]
    });
    // 定义窗口
    var win = new Ext.Window( {
    title : '添加用户',
    layout : 'fit',
    width : 500,
    height : 300,
    closeAction : 'close',
    closable : false,
    plain : true,
    items : formPanel,
    buttons : [ {
    text : '确定',
    handler : function() {
    var form = formPanel.getForm();
    var userName = form.findField('userName').getValue().trim();
    var password = form.findField('password').getValue().trim();
    if (!userName) {
    alert('用户名不能为空');
    return;
    }
    if (!password) {
    alert('密码不能为空');
    return;
    }
    form.submit( {
    waitTitle : '请稍后...',
    waitMsg : '正在保存用户信息,请稍后...',
    url : 'user_save.action',
    method : 'post',
    success : function(form, action) {
    alert(action.result.msg);
    },
    failure : function(form, action) {
    alert(action.result.msg);
    }
    });
    }
    }, {
    text : '取消',
    handler : function() {
    win.close();
    }
    } ]
    });
    win.show();
    }
    /**
    * 第四种Ajax提交方式
    * 这种方式将html的表单转化为ext的表单进行异步提交
    * 使用这种方式,需要定义好html的表单
    *
    * @return
    */
    function saveUser_ajaxSubmit4() {
    new Ext.form.BasicForm('userForm').submit( {
    waitTitle : '请稍后...',
    waitMsg : '正在保存用户信息,请稍后...',
    url : 'user_save.action',
    method : 'post',
    success : function(form, action) {
    alert(action.result.msg);
    },
    failure : function(form, action) {
    alert(action.result.msg);
    }
    });
    }

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表