extJs常用的四种Ajax异步提交分类： ExtJs2010-06-01 16:52 2973人阅读 评论(0) 收藏 举报ajaxextjsfunctionactionuserhtml[java] view plaincopy/**  *   * 第一种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);          }      });  }