ExtJs 表單提交登陸實現(xiàn)代碼
更新時間:2010年08月19日 20:33:44 作者:
上一篇簡單做了一個用ext寫的登陸界面,今天來實現(xiàn)登陸效果,主要是回顧下ext中表單提交方法的使用。
1 在子類中添加單擊提交事件
//登陸按鈕單擊事件
loginFun: function() {
var f = Ext.getCmp("loginForm");
//表單驗證
if (f.form.isValid) {
f.form.submit({
waitTitle: "請稍候",
waitMsg: '正在登陸...',
url: 'http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin',
method: 'POST',
success: function(form, action) {
window.location = 'Main.htm'
},
failure: function(form, action) {
if (action.result == undefined) {
Ext.Msg.alert('提示', "系統(tǒng)出錯...請聯(lián)系管理員");
form.items.items[1].reset();
}
else {
Ext.Msg.alert('提示', action.result.rspText);
form.items.items[1].reset();
}
}
});
}
},
2 在初始化中給登陸按鈕綁定事件
//初始化
init: function() {
this.LoginWin.show();
Ext.getCmp("loginBtn").on('click', this.loginFun);
this.loadMask = new Ext.LoadMask(this.LoginWin.body, { msg: "頁面加載中……" });
}
3.關(guān)于ext.extend
定義:function extend(function sb,function sp,Object overrides)
簡單解釋:第一個參數(shù)--子類
第二個參數(shù)--父類
第三個參數(shù)--重寫對象
例子中 子類為 XQH.ExtJs.Frame.app
父類 Ext.util.Observable(一個抽象基類(Abstract base class),為事件機(jī)制的管理提供一個公共接口。)
更詳細(xì)介紹請看(轉(zhuǎn))http://wangyu.javaeye.com/blog/210849
4.url: 'http://www.dhdzp.com/Service/SystemService/SystemService.ashx?Method=UserLogin'
public void UserLogin()
{
StringBuilder jsonData = new StringBuilder();
bool success = false;
string rspText = string.Empty;
if (Request["LoginName"] != null && Request["LoginPsd"] != null)
{
string loginName = Request["LoginName"].Trim();
string loginPsd = Request["LoginPsd"].Trim();
XUser userEnity = userAccess.GetUserByName(loginName);
if (userEnity != null)
{
if (userEnity.LoginPsd == loginPsd)
{
success = true;
Session["UserEnity"] = userEnity;
}
else
{
success = false;
rspText = "賬號或密碼錯誤";
}
}
else
{
success = false;
rspText = "賬號不存在,請聯(lián)系管理員";
}
JsonConvert<XUser> json = new JsonConvert<XUser>();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}
注意:返回的數(shù)據(jù)必須是Json格式的 success,rspText為返回的標(biāo)記 在js里通過action.result.success里調(diào)用
今天先到這里,下次來實現(xiàn)后臺界面框架。
復(fù)制代碼 代碼如下:
//登陸按鈕單擊事件
loginFun: function() {
var f = Ext.getCmp("loginForm");
//表單驗證
if (f.form.isValid) {
f.form.submit({
waitTitle: "請稍候",
waitMsg: '正在登陸...',
url: 'http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin',
method: 'POST',
success: function(form, action) {
window.location = 'Main.htm'
},
failure: function(form, action) {
if (action.result == undefined) {
Ext.Msg.alert('提示', "系統(tǒng)出錯...請聯(lián)系管理員");
form.items.items[1].reset();
}
else {
Ext.Msg.alert('提示', action.result.rspText);
form.items.items[1].reset();
}
}
});
}
},
2 在初始化中給登陸按鈕綁定事件
復(fù)制代碼 代碼如下:
//初始化
init: function() {
this.LoginWin.show();
Ext.getCmp("loginBtn").on('click', this.loginFun);
this.loadMask = new Ext.LoadMask(this.LoginWin.body, { msg: "頁面加載中……" });
}
3.關(guān)于ext.extend
定義:function extend(function sb,function sp,Object overrides)
簡單解釋:第一個參數(shù)--子類
第二個參數(shù)--父類
第三個參數(shù)--重寫對象
例子中 子類為 XQH.ExtJs.Frame.app
父類 Ext.util.Observable(一個抽象基類(Abstract base class),為事件機(jī)制的管理提供一個公共接口。)
更詳細(xì)介紹請看(轉(zhuǎn))http://wangyu.javaeye.com/blog/210849
4.url: 'http://www.dhdzp.com/Service/SystemService/SystemService.ashx?Method=UserLogin'
復(fù)制代碼 代碼如下:
public void UserLogin()
{
StringBuilder jsonData = new StringBuilder();
bool success = false;
string rspText = string.Empty;
if (Request["LoginName"] != null && Request["LoginPsd"] != null)
{
string loginName = Request["LoginName"].Trim();
string loginPsd = Request["LoginPsd"].Trim();
XUser userEnity = userAccess.GetUserByName(loginName);
if (userEnity != null)
{
if (userEnity.LoginPsd == loginPsd)
{
success = true;
Session["UserEnity"] = userEnity;
}
else
{
success = false;
rspText = "賬號或密碼錯誤";
}
}
else
{
success = false;
rspText = "賬號不存在,請聯(lián)系管理員";
}
JsonConvert<XUser> json = new JsonConvert<XUser>();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}
注意:返回的數(shù)據(jù)必須是Json格式的 success,rspText為返回的標(biāo)記 在js里通過action.result.success里調(diào)用
今天先到這里,下次來實現(xiàn)后臺界面框架。
您可能感興趣的文章:
- jquery實現(xiàn)界面無刷新加載登陸注冊
- struts2+jquery實現(xiàn)ajax登陸實例詳解
- jQuery的cookie插件實現(xiàn)保存用戶登陸信息
- 使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
- jQuery登陸判斷簡單實現(xiàn)代碼
- 將jQuery應(yīng)用于login頁面的問題及解決
- Jsp中解決session過期跳轉(zhuǎn)到登陸頁面并跳出iframe框架的方法
- httpclient模擬登陸具體實現(xiàn)(使用js設(shè)置cookie)
- JS簡單實現(xiàn)登陸驗證附效果圖
- jQuery+Pdo編寫login登陸界面
相關(guān)文章
extjs 學(xué)習(xí)筆記(三) 最基本的grid
extjs的一個亮點就是提供了豐富的UI,使得沒有藝術(shù)細(xì)胞的程序員也能做出絢麗的界面。把所有的UI集中到一起,有好處也有壞處,好處是有了統(tǒng)一的風(fēng)格和接口,壞處是js文件過于龐大,使用extjs的最小集合也超過了500k,所以在有些項目中并不適用。2009-10-10
extjs ColumnChart設(shè)置不同的顏色實現(xiàn)代碼
extjs為ColumnChart設(shè)置不同的顏色想必有很多朋友還是比較陌生的吧,接下來為大家詳細(xì)介紹下具體設(shè)置代碼,感興趣的朋友可以參考下哈2013-05-05
Extjs NumberField后面加單位實現(xiàn)思路
本文為大家介紹下在NumberField后面加單位,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-07-07
Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享
鍵盤上的F5或者退格鍵等按鍵一般來說會觸發(fā)頁面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來看一下Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享2016-06-06

