ExtJs 備忘錄（4）—— Form表單（四） [ 數據提交 ]

一、截圖和示例共用Ext.FormPanel
　　　　1.1　　截圖
　　　　　　

　　　　　　由于本文主要關注的是表單提交的幾種方式，所以僅用了一個表單項以便于測試和減少示例代碼。
　　　　1.2　　示例共用Ext.FormPanel

 ????<script?type="text/javascript">
 ????????Ext.onReady(function()?{
 ???????????Ext.QuickTips.init();
 ???????????Ext.form.Field.prototype.msgTarget?=?'side';
 ????????????
 ????????????var?form1?=?new?Ext.FormPanel({
 ????????????????frame:?true,
 ????????????????renderTo:?Ext.getBody(),
 ????????????????title:?'<center>表單提交</center>',
 ????????????????style:?'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
 ????????????????labelAlign:?'right',
 ????????????????labelWidth:?170,
 ????????????????buttonAlign:'center',
 ????????????????items:?[new?TextField('param2','表單項')]
 ????????????});
 ????????});
 ????</script> 

　　　　關于封裝后的表單控件，可以參照系列的前幾篇文章，也可以在后面的源代碼里面找到相關的封裝代碼。
二、普通方式提交
　　　　適合一次操作頁面，即提交后跳轉到另外一個頁面。
　　　　前臺代碼：

 ????????????????????text:?"普通方式",
 ????????????????????handler:function(){
 ????????????????????????if(form1.form.isValid()){
 ????????????????????????????//只用指定TextField的id或者name屬性，服務器端Form中就能取到表單的數據
????????????????????????????//如果同時指定了id和name，那么name屬性將作為服務器端Form取表單數據的Key
????????????????????????????var?form?=?form1.getForm().getEl().dom;
 ????????????????????????????form.action?=?'submit.aspx?method=Submit1&param1=abc';
 ????????????????????????????//指定為GET方式時,url中指定的參數將失效，表單項轉換成url中的key=value傳遞給服務端
????????????????????????????//例如這里指定為GET的話,url為:submit.aspx?param2=你輸入的值
????????????????????????????//form.method?=?'GET';//GET、POST
????????????????????????????form.submit();
 ????????????????????????}
 ????????????????????} 

　　　　代碼說明：這段代碼加在buttons:[{}]里面中。
　　　　后臺代碼：

 ????///?<summary>
 ????///?POST普通提交
 ????///?</summary>
 ????///?<returns></returns>
????public?void?Submit1()
 ????{
 ????????//數據庫操作
????????string?param1?=?Request.QueryString["param1"];
 ????????string?param2?=?Request.Form["param2"];
 ????????//Response.Write(string.Format("param1(GET):{0}<br?/>param2(POST):{1}<br?/>",?Request.QueryString["param1"],?Request.Form["param2"]));
 ????????//頁面掉轉
????????Response.Redirect("esayadd.aspx");
 ????} 

?　　　　普通提交我也翻閱了不少文章，在3.0版本中可以如上實現比較簡單，或者直接設置FormPanel的standardSubmit:true屬性，則下面默認Ajax提交方式也將變成普通的表單提交。注意這里并不需要設置 onSubmit: Ext.emptyFn等，表單項的id和name指定也在注釋里面有說明了。
三、Ajax方式提交
　　　　3.1 ?默認方式
　　　　　　客戶端代碼：

 ????????????????????text:?"默認方式",
 ????????????????????handler:function(){?
 ????????????????????????form1.getForm().submit({
 ????????????????????????????url:'submit.aspx?method=Submit2&param1=abc',
 ????????????????????????????//method:'POST',
????????????????????????????//waitTitle?:?"提示",
????????????????????????????//waitMsg:?'Submitting?your?data',
????????????????????????????success:?function(form,?action){
 ????????????????????????????????alert(action.response.responseText);
 ????????????????????????????},
 ????????????????????????????failure:?function(form,?action){
 ????????????????????????????????alert(action.result.errormsg);
 ????????????????????????????}
 ????????????????????????});
 ????????????????????} 

　　　　　　服務器端代碼：

 ????///?<summary>
 ????///?默認方式
 ????///?</summary>
????public?void?Submit2()
 ????{
 ????????string?param1?=?Request.QueryString["param1"];
 ????????string?param2?=?Request.Form["param2"];
 ????????//必須返回JOSIN形式數據
????????Response.Write("{success:true}");
 ????????Response.End();
 ????} 

　　　　　　代碼說明：
　　　　　　　　a).　　服務器端必須返回JSON格式，success返回true則執行success:?function(form,?action)里面的代碼，返回false則執行failure:?function(form,?action)中的代碼。
　　　　　　　　b).　　服務器端必須Response.End();
　　　　　　　　寫測試代碼的時候就是因為沒有按這個格式返回，一直以為客戶端代碼是否有問題，耽誤了挺多時間。
　　　　3.2　　通過Ext.data.Connection提交數據
　　　　　　客戶端代碼：

 ????????????????????text:?"Connect方式",
 ????????????????????handler:function(){?
 ????????????????????????//注意
????????????????????????var?conn?=?new?Ext.data.Connection();
 ????????????????????????conn.request({
 ????????????????????????????url:?'submit.aspx?method=Submit4',
 ????????????????????????????//此處與params對應，如果為POST，則服務器端從Request.Form中可以取得到數據，反之從QueryString中取數據
????????????????????????????method:?'POST',//GET
????????????????????????????params:form1.form.getValues(),
 ????????????????????????????success:?function(response,?opts)?{
 ?????????????????????????????????MsgInfo(response.responseText);
 ????????????????????????????}
 ????????????????????????});
 ????????????????????} 

　　　　　　服務器端代碼：

 ????///?<summary>
????///?Connect方式
????///?</summary>
????public?void?Submit3()
 ????{
 ????????string?param1?=?Request.QueryString["param1"];
 ????????string?param2?=?Request.Form["param2"];
 ????????Response.Write("ok");
 ????????Response.End();
 ????} 

　　　　　　代碼說明：
　　　　　　　　這里就沒有限制返回的數據格式了，但仍需要設置Response.End()，所以默認在PageBase里面設置了此代碼。
　　　　3.3　　通過Ext.Ajax提交數據
　　　　　　客戶端代碼：

 ????????????????????//Ext.Ajax是繼承Ext.data.Connection而來
????????????????????text:?"Ajax方式",
 ????????????????????handler:function(){?
 ????????????????????????Ext.Ajax.request({
 ????url:?'submit.aspx?method=Submit3',
 ????method:?'POST',
 ????//jsonData://指定需要發送給服務器端的JSON數據。如果指定了該屬性則其它的地方設置的要發送的參數值將無效。
　　　　　　　　????//xmlData://指定用于發送給服務器的xml文檔,如果指定了該屬性則其它地方設置的參數將無效。
　　　　　　　　????params:form1.form.getValues(),//取得key/value對象數組
　　　　　　　　????//指定Ajax請求的回調函數，該函數不管是調用成功或失敗，都會執行。
　　　　　　　　????callback:?function?(options,?success,?response)?{
 ??????????if(success){
 ????????MsgInfo(response.responseText);
 ????}
 ????}
 ????????});
 ????????????????????} 

　　　　　　服務器端代碼：

 ????///?<summary>
 ????///?Ajax方式
 ????///?</summary>
????public?void?Submit4()
 ????{
 ????????string?param1?=?Request.QueryString["param1"];
 ????????string?param2?=?Request.Form["param2"];
 ????????Response.Write("yes");
 ????????Response.End();
 ????} 

　　　　Ajax方式提交總結：
　　　　　　a).　　服務器端處理返回數據后都需要Response.End();
　　　　　　b).　　很明顯，Ajax的特點之一就是不刷新頁面，提高用戶體驗。
　　　　　　c).　　回調分為callback和success+failure兩種方式，后面是將前面的拆成2個函數來處理。
四、下載

　　　　ExtJS2009-10-2.rar

本文轉自博客園農民伯伯的博客，原文鏈接：ExtJs 備忘錄（4）—— Form表單（四） [ 數據提交 ]，如需轉載請自行聯系原博主。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/539897.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/539897.shtml
英文地址，請注明出處：http://en.pswp.cn/news/539897.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！