extJs常用的四種Ajax非同步提交

来源:http://www.cnblogs.com/toyz/archive/2017/01/19/6308932.html
-Advertisement-
Play Games

/** * 第一種Ajax提交方式 * 這種方式需要直接使用ext Ajax方法進行提交 * 使用這種方式,需要將待傳遞的參數進行封裝 * @return entitySearch.firstname:document.all.firstname.value, */function saveUser ...


/**
 * 第一種Ajax提交方式
 * 這種方式需要直接使用ext Ajax方法進行提交
 * 使用這種方式,需要將待傳遞的參數進行封裝
 * @return entitySearch.firstname:document.all.firstname.value,
 */
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();
}

 

關註流行國外網站

facebook:http://www.fb-on.com

facebook官網:http://www.facebookzh.com

facebook:http://www.cn-face-book.com

youtube:http://www.youtubezh.com

twitter:http://www.twitterzh.com


/**
 * 第四種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);
  }
 });
}


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • this是面向對象語言中一個重要的關鍵字,理解並掌握該關鍵字的使用對於我們代碼的健壯性及優美性至關重要。而javascript的this又有區別於Java、C#等純面向對象的語言,這使得this更加撲朔迷離,讓人迷惑。this使用到的情況: 1. 純函數2. 對象方法調用3. 使用new調用構造函數 ...
  • CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI樣式版本:1.8.13;其功能為創建jQuery UI風格的Tab用於顯示iframe。 本示例中符加了jQuery.contextMenu插件,我修改了其樣式,使用了jQuery UI的皮膚 運行一下 ...
  • protractor內代碼的語法是基於ES6的,比如:裡面用到了展開運算符“...”,node.js 6.0以下是不支持該語法特性。 所以,安裝protractor是不會報錯,但運行webdriver-manager的升級就會報那三個點無法識別。 需要將node.js升級到6.0+就能解決該問題。 ...
  • 以管理員身份運行windows PowerShell並安裝Chocolatey 我的機器是windows10,可以在開始菜單->所有應用->W欄中找到Window PowerShell並運行。 在命令行中運行命令: 等待安裝完成,預設會安裝最新版。 安裝後運行命令確認: 我這裡得到的版本回覆: 確認 ...
  • 前面的話   當我們通過某些行為(點擊、移動或滾動)觸發頁面進行大面積繪製的時候,瀏覽器往往是沒有準備的,只能被動使用CPU去計算與重繪,由於沒有事先準備,應付渲染夠嗆,於是掉幀卡頓。而CSS屬性will change為web開發者提供了一種告知瀏覽器該元素會有哪些變化的方法,這 ...
  • 最近的計劃,就是每天來幾個特效,當然這裡有限制,在什麼候選區只能放一個,還每天有限制發佈的,哎, 啊 終於寫完了,看到一個挺好玩的東西,想到能不能用網頁的特效做出來,試試唄!不過,一想肯東有很多的 相類似的了,不過,反正就是挺有成就感的。高興即來淫詩一首,兩眼黑黑,燈下黑黑,嘿嘿嘿嘿嘿嘿嘿嘿。。。 ...
  • 一、set 1.基本用法 2.Set實例的屬性 3.Set實例的方法 4.遍歷操作 二、WeakSet 三、Map結構的目的和基本用法 實例的屬性和操作方法 遍歷方法 Map結構轉為數組結構,比較快速的方法是結合使用擴展運算符(...)。 四、WeakMap WeakMap與Map在API上的區別主 ...
  • 在一年前初學js的時候,看過很多關於非同步編程的講解。但是由於實踐經驗少,沒有辦法理解的太多,太理論的東西也往往是看完就忘。 經過公司的三兩個項目的鍛煉,終於對js非同步編程有了比較具體的理解。但始終入門較淺,在這裡就當是給自己一個階段性的總結。 在非同步編程中,一條語句的執行不能依賴上一條語句執行完畢的... ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...