使用AJAX开发简单的网站系统登录

现在的网站登录基本都会使用AJAX来进行数据操作,使用AJSX和JQuery以及我们写好的一般应用程序或者是API接口可以为我们的用户一个友好的UI交互效果。我们使用AJAX把数据传给API接口之后获取返回的状态对应的操作前端的HTML元素即可。

先来看一下登录界面的CSS布局:

使用AJAX开发简单的网站系统登录 API JQuery  第1张


我们使用的技术有API接口开发(MVC3)、AJAX、JQuery等。使用的JQ插件有 layer(WEB弹出层)、fakeLoader(页面加载动画)等。

首先,我们需要先把前台的CSS布局搭建起来(直接上代码了哈):


     <article class="htmleaf-container">
        <header class="htmleaf-header">
            <h1><a href="/" class="xiaoma_a">小马软件工作室</a><span>Pony Software Makes Life More Beautiful</span></h1>
            <div class="htmleaf-links"></div>
        </header>
        <div class="panel-lite">
            <div class="thumbur">
                <div class="icon-lock"></div>
            </div>
            <h4>用户登录</h4>
            <div class="form-group">
                <input type="text" required="required" autocomplete="off" class="form-control" name="username" id="username" />
                <label class="form-label">用户名</label>
            </div>
            <div class="form-group">
                <input type="password" required="required" autocomplete="off" class="form-control" name="password" id="password" />
                <label class="form-label">密 码</label>
            </div>
            <div class="form-group">
                <img src="/API/ImgCode" class="codeimh" id="codepic" />
                <input type="text" required="required" autocomplete="off" class="form-control" name="code" id="code" maxlength="6" />
                <label class="form-label">验证码</label>
            </div>
            <button class="floating-btn" onclick="checkLogin()"><i class="icon-arrow"></i></button>
        </div>
    </article>

界面布局之后,我们就先把前端的验证机制做好了(判断用户名、密码和验证码不为空):


var username = $("input[name=username]").val();
    var password = $("input[name=password]").val();
    var code = $("input[name=code]").val();

    if ($.trim(username) == "" || $.trim(password) == "" || $.trim(code) == "") {
        layer.msg('请认真填写登陆信息!', { icon: 0 });
        return false;
}

接着就是AJAX方法和API接口一起开发了。


AJAX方法:


layer.load(1);
    $.ajax({
        url: '/masoft/AdminLogin',
        data: {
            username: username,
            password: password,
            code: code
        },
        type: 'post',
        success: function (data) {
            layer.closeAll('loading');
            if (data == 1) {
                window.location.href = "";
            } else if (data == 0) {
                layer.msg('请认真填写登陆信息!', { icon: 0 });
            } else if (data == -1) {
                layer.msg('验证码错误!', { icon: 0 });
            } else if (data == -2) {
                layer.msg('用户名不存在!', { icon: 0 });
            } else if (data == -3) {
                layer.msg('登陆密码不正确!', { icon: 0 });
            } else {
                layer.msg('与服务器断开连接...', { icon: 5 });
            }
        },
        error: function () {
            layer.closeAll('loading');
            layer.msg('与服务器断开连接...', { icon: 5 });
        }
  });

API接口:



        #region 方法 管理员登录
        [ValidateInput(false)]
        public string AdminLogin()
        {
            try
            {
                string username = Request.Params["username"].Trim();
                string password = Request.Params["password"].Trim();
                string code = Request.Params["code"].Trim();
                if (username == "" || password == "" || code == "")
                {
                    return "0";//信息填写不完整
                }
                else
                {
                    if (String.Compare(Maticsoft.Common.SessionHelper.Get(Maticsoft.Common.ConfigHelper.GetConfigString("ManageLoginCode")), code, true) != 0)
                    {
                        return "-1";//验证码不正确
                    }
                    else
                    {
                        if (!bll_manager.Exists(username))
                        {
                            return "-2";//用户名不存在
                        }
                        else
                        {
                            if (!bll_manager.Exists(username, Maticsoft.Common.StringHelper.MD5Encrypt(password)))
                            {
                                return "-3";//密码不正确
                            }
                            else
                            {
                                //登陆成功 -- 存储cookie
                                Maticsoft.Common.CookieHelper.EnCookie(Maticsoft.Common.ConfigHelper.GetConfigString("Cookie_AdminName"), username);
                                Maticsoft.Common.CookieHelper.EnCookie(Maticsoft.Common.ConfigHelper.GetConfigString("Cookie_AdminPWD"), password);
                                return "1";
                            }
                        }
                    }
                }
            }
            catch (System.Exception ex)
            {
                Maticsoft.Common.LogHelper.WriteErrorLog(ex);
                return "";
            }
        }
        #endregion

登录成功之后不要忘记存储Cooike或者是Session哦!


本文标题:使用AJAX开发简单的网站系统登录
本文链接:https://masoft.cn/post/24.html
作者授权:除特别说明外,本文由 智汇软件 原创编译并授权 智汇科技 刊载发布。
版权声明:本文使用「署名-禁止演绎 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

本文 暂无 评论

Top

分享:

支付宝

微信