ASP.NET+ExtJs2.0+Ajax连接数据验证用户登录

最新推荐文章于 2012-04-10 10:38:26 发布

LMAOhuaNL

最新推荐文章于 2012-04-10 10:38:26 发布

阅读量2.6k

点赞数

分类专栏： asp.Net Ext Js 文章标签： extjs asp.net ajax function stylesheet xhtml

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6793088

版权

asp.Net 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

Ext Js

20 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <!--ExtJs官方2.0下载css文件-->
    <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <!--ExtJs官方2.0下载ext_base.js文件-->
    <script src="ExtJs/ext-base.js" type="text/javascript"></script>
    <!--ExtJs官方2.0下载ext-all.js文件-->
    <script src="ExtJs/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        var loginPanel;
        Ext.onReady(function() {
            //登录面板
            loginPanel = new Ext.form.FormPanel({
                labelWidth: 40,
                width: 230,
                height: 120,
                frame: true,
                bodyStyle:"padding:20", //给这个面板添加内间距
                items: [
                        { xtype: "textfield", id: "userName", fieldLabel: "用户名" ,style:"margin:1 3 15 3", labelWidth: 10, emptyText: "请输入用户名...", allowBlank: false, blankText: "用户名不能为空" },
                        { xtype: "textfield", id: "userPass", fieldLabel: "密   码", style: "margin:1 3 15 3", labelWidth: 10, inputType: "password" }
                       ]
            });
            //登录成功后就弹出一个新窗体
            function loginSuccess() {
                var winLoginSuccess = new Ext.Window({
                    title:"登录成功后的窗体",
                    minimizable: true, //最小化
                    maximizable: true, //最大化
                    collapsible: true,
                    width: 550,
                    height: 550,
                    frame: true,
                    items: [{ xtype: "button", frame: true, text: "我是登录成功后窗体的一个按钮"}]
                });
                win.hide(); //登录窗体隐藏
                winLoginSuccess.show(); //显示登录成功后的窗体

            }
            //登录窗体
            var win = new Ext.Window({
                title: "登录窗体",
                minimizable: true, //最小化
                maximizable: true, //最大化
                width: 240,
                height: 186,
                frame: true,
                items: [loginPanel],
                buttons: [{ text: "确定", handler: CheckLogin }, { text: "取消"}]
            });
            //最小化事件
            win.minimize = function() {
                //                this.hide();
                Ext.MessageBox.confirm("提示", "是否要最小化", minWindow);
                function minWindow(btn) {
                    if (btn == "yes") {
                        Ext.Msg.alert("提示", "确定最小化么", function() { alert("成功最小化"); });
                    }
                }
            }
            win.show(); //显示窗体
            //验证用户登录信息(连接数据库)
            function CheckLogin() {
                var userName = Ext.getCmp("userName").getValue(); //用户名
                var userPass = Ext.getCmp("userPass").getValue(); //密 码
                if (Ext.util.Format.trim(userName) == "" || Ext.util.Format.trim(userPass) == "") {//用户名和密码不能为空
                    Ext.Msg.alert("提示", "用户名或密码不能为空");
                    return;
                }
                Ext.Ajax.request({
                    url: "Handler2.ashx?ParamUserName=" + userName + "&ParamUserPass=" + userPass, //将用户名和密码传送到url
                    method: "get",
                    //params: { ParamUserName: userName, ParamUserPass: userPass },
                    success: function(response) {
                        var getData = response.responseText; //获取服务器数据
                        if (getData == "ok") {
                            loginSuccess(); //登录成功了 
                        } else {
                            Ext.Msg.alert("警告","登录失败！");
                        }
                    },
                    failure: function(response, options) { alert("失败"); }
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

//Handler2.ashx

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;

public class Handler2 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string userName = context.Request.QueryString["ParamUserName"];
        string userPass = context.Request.QueryString["ParamUserPass"];
        /***
         * 这期间可以进行连接数据库，进行验证
         * */
        if (userName == "admin" && userPass == "123")
        {
            context.Response.Write("ok"); //如果验证成功则返回ok
        }
        else {
            context.Response.Write("fail");//如果验证失败则返回fail
        }
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

预览效果如下：

LMAOhuaNL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
ASP.NET+ExtJs2.0+Ajax连接数据验证用户登录

var loginPanel; Ext.onReady(function() { //登录面板 loginPanel = new Ext.form.FormPanel({ la
复制链接

扫一扫