extJS中常用的4种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);

  }

  });

  }