Heim > Web-Frontend > js-Tutorial > ExtJs 表单提交登陆实现代码_extjs

ExtJs 表单提交登陆实现代码_extjs

WBOY
Freigeben: 2016-05-16 18:21:08
Original
1327 Leute haben es durchsucht
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('提示', "系统出错...请联系管理员");
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.关于ext.extend
  定义:function extend(function sb,function sp,Object overrides)
  简单解释:第一个参数--子类
       第二个参数--父类
       第三个参数--重写对象
  例子中 子类为 XQH.ExtJs.Frame.app
       父类 Ext.util.Observable(一个抽象基类(Abstract base class),为事件机制的管理提供一个公共接口。)
  更详细介绍请看(转)http://wangyu.javaeye.com/blog/210849
4.url: 'http://www.jb51.net/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 = "账号不存在,请联系管理员";
}
JsonConvert json = new JsonConvert();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}

注意:返回的数据必须是Json格式的 success,rspText为返回的标记 在js里通过action.result.success里调用
今天先到这里,下次来实现后台界面框架。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage