extJs常用的四种Ajax异步提交 extJs常用的四种Ajax异步提交

/**
 * 第一种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);
  }
 });
}