【原】提高篇:第四篇,登陆示例

图片示例

//前台显示部分

<form id="form1" runat="server">
    <div><div id="btnShow" style=" text-align:center; padding-top:300px; vertical-align:middle;"></div>
    <script type="text/javascript">
    function LoginDemo()
    {       
        //登陆窗体
        var loginPanel = new Ext.form.FormPanel
        ({
             id:"loginPanel",labelPad:0,labelWidth:40,frame:true,
             items:
             [
                 {xtype:"field",id:"UserName",fieldLabel:"用户名"},
                 {xtype:"field",id:"Password",fieldLabel:"密&nbsp;&nbsp;&nbsp;码"}
             ]        
        });
        var loginWindow;
        if(!loginWindow)
        {
            loginWindow = new Ext.Window
            ({
                 id:"loginWindow",
                 title:"登陆窗口",
                 width:200,
                 height:127,
                 resizable:false,
                 closable:false,
                 items:
                 [
                    loginPanel
                 ],
                 buttons:
                 [
                     {xtype:"button",text:"确定",handler:validatorData},
                     {xtype:"button",text:"取消",handler:function(){loginWindow.hide();}}
                 ]
            });
        }
        loginWindow.show();
        document.body.onkeydown = function(){loginWindow.show();};
        //连接数据库
        function validatorData()
        {
            var UserName = Ext.getCmp("UserName").getValue();
            var Password = Ext.getCmp("Password").getValue();
            if(Ext.util.Format.trim(UserName)==""||Ext.util.Format.trim(Password)=="")
            {
                Ext.Msg.alert("警告","请正确输入数据,用户名和密码都不能够为空!");
                return;
            }
            Ext.Ajax.request
            ({
                 url:"
ValidatorData.aspx", //请求的地址
                 params:{ParamValue:"1",ParamUserName:UserName,ParamPassword:Password},//发送的参数
                 success:function(response,option)
                 {
                     var obj = Ext.util.JSON.decode(response.responseText);//返回的信息
                     if(obj.success==true)
                     {
                         Ext.Msg.alert("好消息","好消息:你登陆成功了!");
                         //清除输入框
                         Ext.getCmp("UserName").setValue("");
                         Ext.getCmp("Password").setValue("");
                         loginWindow.hide();
                     }
                     else
                     {
                         Ext.Msg.alert("坏消息","坏消息:你登陆失败了!");
                     }
                 },
                 failure:function()
                 {
                     Ext.Msg.alert("坏消息","坏消息:你登陆出现异常了!");
                 }
            });
        }
        //显示登陆窗口
        var btnShow = new Ext.Button
        ({
             renderTo:"btnShow",text:"显示登陆窗口",handler:function(){loginWindow.show();}
        });
    }
    Ext.onReady(LoginDemo);   

</script>
    </div>
    </form>

//后台代码部分

protected void Page_Load(object sender, EventArgs e)
    {
        string ParamValue = Request["ParamValue"];
        if (ParamValue == "1")
        {
            string UserName = Request.QueryString["ParamUserName"];
            string Password = Request.QueryString["ParamPassword"];
            //连接数据库
            #region 连接数据库
            /*
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = "连接字符串";
            if (conn.State == ConnectionState.Closed)
                conn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = string.Format(" select UserID from 表 where UserName = '{0}' and Password = '{1}'", UserName, Password);
            object obj = cmd.ExecuteScalar();
            if (obj != null)
            {
                if (Convert.ToString(obj) != "")
                {
                    Response.Write("{success:true}");
                }
                else
                {
                    Response.Write("{success:false}");
                }
            }
            else
            {
                Response.Write("{success:false}");
            }
            */
            #endregion
            Response.Write("{success:true}");
        }
    }

posted @ 2008-10-09 14:16 殷良胜 阅读(2280) 评论(27)  编辑 收藏 网摘

  回复  引用  查看    
#1楼[楼主]2008-10-30 13:04 | 殷良胜      
  回复  引用    
#2楼2008-11-14 17:35 | 凡可[未注册用户]
在实验登录代码的时候,总是在提示js出错,说是缺少")"
var obj = Ext.util.JSON.decode(response.responseText);//返回的信息

  回复  引用  查看    
#3楼[楼主]2008-11-14 22:02 | 殷良胜      
@凡可
呵呵。建议你在cs文件里 无论登陆成功与失败,希望你传回的数据是json格式或者你喜欢的任何格式 然后在
success:function(response,option)
{
var obj = Ext.util.JSON.decode(response.responseText);//返回的信息
if(obj.success==true)
{
Ext.Msg.alert("好消息","好消息:你登陆成功了!");
//清除输入框
Ext.getCmp("UserName").setValue("");
Ext.getCmp("Password").setValue("");
loginWindow.hide();
}
else
{
Ext.Msg.alert("坏消息","坏消息:你登陆失败了!");
}
这个函数模块里面,你自己设置如何解析你的后台传回的数据,然后判断成功或者失败。
出现你说的这种情况是,你的后台有异常或者没有将{success:true}或者{success:false}正确返回

  回复  引用    
#4楼2008-11-15 14:27 | 凡可[未注册用户]
谢谢,弄好了,很有成就感!哈哈
  回复  引用    
#5楼2008-11-28 21:32 | lawrenst[未注册用户]
很喜欢你的博客,不过最大的遗憾是你用的asp,而我是学J2EE的,不能跟着学,非常遗憾啊。
  回复  引用    
#6楼2008-11-30 18:51 | xiaosese[未注册用户]
@凡可
我也出现这个问题。你是怎么解决的啊?

  回复  引用  查看    
#7楼[楼主]2008-12-01 08:14 | 殷良胜      
@lawrenst
那好解决
你教我J2EE就可以了

  回复  引用    
#8楼2008-12-20 12:50 | lihaijia[未注册用户]
为什么输入用户名密码,后程序没反应呢

  回复  引用    
#9楼2008-12-21 12:06 | wanxian[未注册用户]
对于入门的例子
希望楼主能够提供源代码下载
因为一个小小的错误可能都需要花费我们太多的时间

  回复  引用  查看    
#10楼[楼主]2008-12-22 11:34 | 殷良胜      
@wanxian
你的建议不错
有空的时候我会尽量修改下

  回复  引用  查看    
#11楼[楼主]2008-12-22 11:37 | 殷良胜      
@lihaijia
将ValidatorData.aspx页面的html源代码只保留最上面一行

  回复  引用  查看    
#12楼2009-01-22 11:08 | 魏战云      
老大,为什么我执行这个例子,可以运行,但是也报了个错,点确定后,先弹出信息框,网页底下提示有个异常,我打开来看,是insertAdjacentHTML为空或不是对象,是怎么会事啊,这个例子挺好,应该安排在前面,由易入难嘛

  回复  引用    
#13楼2009-02-19 01:43 | zm62[未注册用户]
这个对初学与SQL 2005 连接给出了很好的例子,我就这个问题在网上找了差不多一个月了,还没搞懂,能否给个说明?先谢谢了,,,

  回复  引用  查看    
#14楼[楼主]2009-02-20 10:20 | 殷良胜      
--引用--------------------------------------------------
zm62: 这个对初学与SQL 2005 连接给出了很好的例子,我就这个问题在网上找了差不多一个月了,还没搞懂,能否给个说明?先谢谢了,,,

--------------------------------------------------------
好 以后给你写个简单的例子

  回复  引用    
#15楼2009-02-26 15:58 | 陈小雨[未注册用户]
在实验登录代码的时候,总是在提示js出错,说是缺少")"
chenfuhai775@163.com
能给你的源码发给我下吗?
搞了很多天了,还没弄好!
麻烦了

  回复  引用  查看    
#16楼2009-02-27 00:31 | haoqiang      
@陈小雨
在后台中一定要写如下:
Response.Write("{success:true}");
我的Write中只写了success:true而没有大括号就会报错.

  回复  引用  查看    
#17楼[楼主]2009-02-27 10:26 | 殷良胜      
--引用--------------------------------------------------
陈小雨: 在实验登录代码的时候,总是在提示js出错,说是缺少&quot;)&quot;
chenfuhai775@163.com
能给你的源码发给我下吗?
搞了很多天了,还没弄好!
麻烦了
--------------------------------------------------------
如还未解决
请尝试把【url:"ValidatorData.aspx", //请求的地址
】该页面的html文件只保留最上面一行,其余的html代码全部删除

  回复  引用  查看    
#18楼[楼主]2009-03-15 09:46 | 殷良胜      
@haoqiang
说的很对的

  回复  引用    
#19楼2009-04-17 10:47 | lyrf[未注册用户]
大哥有问题呀
怎么所有的东西在火狐都无效呢
东西可以渲染出来 但比如handler 就全没效果了
------------------------------------------
这情况是 VS2008 asp.net 环境下的 Ext.2.2.1

但我用同样的代码 用JSP来做却没问题 为什么呀

  回复  引用    
#20楼2009-04-17 11:30 | lyrf[未注册用户]
@lyrf
呵呵 那份文件我可是从官方下的
可能传输过程文件有所损坏 我再下一份去替换掉就可以了

  回复  引用  查看    
#21楼[楼主]2009-04-17 13:21 | 殷良胜      
@lyrf
呵呵

  回复  引用    
#22楼2009-04-28 15:52 | hiee23[未注册用户]
经典。楼主加油。支持。 
  回复  引用  查看    
#23楼[楼主]2009-04-28 16:52 | 殷良胜      
--引用--------------------------------------------------
hiee23: 经典。楼主加油。支持。 
--------------------------------------------------------
好 谢谢

  回复  引用    
#24楼2009-05-15 15:33 | 宇洋[未注册用户]
正在学习EXT中,谢谢殷老师!
  回复  引用    
#25楼2009-06-07 18:25 | guiling[未注册用户]
@凡可
呵呵。建议你在cs文件里 无论登陆成功与失败,希望你传回的数据是json格式或者你喜欢的任何格式.
老师,我也出现凡可的情况,但是不知道怎么改~初学者,老师能不能讲的具体点~

  回复  引用    
#26楼2009-06-18 10:16 | СомёОл
@在实验登录代码的时候,总是在提示js出错,说是缺少")"
------------------------------------------------------
解决方法:在用Response.Write();时,输出的是脚本,如果你的页面有其它内容也会输出,所以返回的应该不是个正确的JSON数据,建议时候一般处理程序,ASHX。一般处理程序返回的是干净的数据,大家可以试一试!


  回复  引用    
#27楼2009-07-02 14:44 | cztaxlyh[未注册用户]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtLogin.aspx.cs" Inherits="ExtLogin" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="extjs2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="extjs2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="extjs2.0/ext-all.js" type="text/javascript"></script>
<script src="extjs2.0/source/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();

var txtUserId = new Ext.form.TextField({
fieldLabel: "姓名",
allowBlank: false,
blankText: "请输入您的姓名",
msgTarget: "qtip"
});

var txtPassword = new Ext.form.TextField({
fieldLabel: "密码",
allowBlank: false,
blankText: "请输入您的密码",
msgTarget: "qtip"
});

var btnLogin = new Ext.Button({
text: "登录",
width: 100,
handler: login
});

var btnReset = new Ext.Button({
text: "重置",
width: 100,
handler: reset
});

var frmLogin = new Ext.form.FormPanel({
title: "系统登录",
labelPad: 10,
labelWidth: 60,
labelAlign: "right",
frame: true,
height: 120,
width: 300,
applyTo: "divFormPanel",
items: [txtUserId, txtPassword],
buttons: [btnLogin, btnReset]
});



function login() {
frmLogin.form.submit({
url: "ExtLogin.ashx",
method: "post",
params: { UserID: txtUserId.getValue(), Password: txtPassword.getValue() },
success: function(form, action) {
Ext.Msg.alert("成功", "系统登录成功");
},
failure: function(form, action) {
var memoryProxy = new Ext.data.MemoryProxy(action.result);
var jsonReader = new Ext.data.JsonReader({
totalProperty: "success",
root: "errors",
fields: [{ name: "Msg", type: "string"}]
});
var store = new Ext.data.Store({
proxy: memoryProxy,
reader: jsonReader
});
store.load();
var record = store.getAt(0);
var errMsg = record.get("Msg");
Ext.Msg.alert("失败", "系统登录失败, 错误源:" + action.failureType + ";原因:" + errMsg);
}
});
}

function reset() {
frmLogin.form.reset();
}
});

</script>


</head>
<body style="margin: 10px;">

<div id="divFormPanel">
</div>

</body>
</html>

c#一般处理程序代码:
<%@ WebHandler Language="C#" Class="ExtLogin" %>

using System;
using System.Web;

public class ExtLogin : IHttpHandler {

public void ProcessRequest(HttpContext context)
{
string userName = context.Request.Params["UserId"];
string password = context.Request.Params["Password"];

string result = "";
if (userName != "lyh")
{
result = "{success:false, errors:[{Msg:'帐号错误'}]}";
}
else
{
if (password != "123456")
{
result = "{success:false, errors:[{Msg:'密码错误'}]}";
}
else
{
result = "{success:true}";
}
}
context.Response.Write(result);
}

public bool IsReusable {
get {
return false;
}
}

}

发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1307254




相关文章:

相关链接: