您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 这篇文章主要介绍了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);  }  });  }