Html+Javascript+Ajax实现用户登录系统

本文主要通过Html和Css建立一个简单的用户登录页面,然后通过javascript和Ajax连接上一篇文章PHP+MySQL实现用户登录注册API接口。由于博主之前一直做的是APP开发,对Web前端及后台了解得不多,用了一个星期才一步一步摸索着把Web前端到PHP后台调通,所以本文适合跟我一样的入门小白学习,后面有个关于Form表单提交的问题希望有大神能够给我解答。好了,先上代码吧。

首先是login.css

body {
    background-color: #F5F5F5;
    font-family: Arial, Helvetica, sans-serif;
    color:#666;
}

input {
    padding: 9px;
    border: solid 1px #E5E5E5;
    outline: 0;
    width: 200px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%,#EEEEEE),to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 13px;
    font-style: normal;
    line-height: 100%;
    font-weight: normal;
    font-variant: normal;
    color: #617798;
}

.submit {
    width: auto;
    padding: 9px 15px;
    background: #617798;
    border: 0;
    font-size: 14px;
    color: #FFFFFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
}

input:hover,
input:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    color: #617798;
}

#logintable {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fefefe;
    border: 1px solid #CCC;
    color: #333;
    box-shadow:0px 0px 8px #cccccc;
    -moz-box-shadow:0px 0px 8px #cccccc;
    -webkit-box-shadow:0px 0px 8px #cccccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding:10px;
    margin-top: 50px;
}
            
.message {
    text-align: center;
    padding: 20px;
    font-size: 24px;
    text-shadow: -1px -1px 1px #cccccc;
    filter: dropshadow(color=#ffffff, offx=1, offy=1);
    color: #617798;
}
上面就是一些css样式,只是为了页面的美观,并不是本文的重点,所以看不懂可以略过,接下来是login.js

//定义HTTP连接对象
var xmlHttp;
            
//实例化HTTP连接对象
function createXmlHttpRequest() {
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
}
            
//发起登录请求
function login() {
    createXmlHttpRequest();
    var name = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if(name == null || name == "") {
        innerHtml("请输入用户名");
        return;
    }
    if(password == null || password == "") {
        innerHtml("请输入密码");
        return;
    }       
    var url = "user.php";
    xmlHttp.open("POST", url, true);
    xmlHttp.onreadystatechange = handleResult;
    xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
    xmlHttp.send("action=login&name=" + name + "&psd=" + password);
}

//处理服务器返回的结果/更新页面
function handleResult() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var response = xmlHttp.responseText;
        var json = eval('(' + response + ')');     
        if(json['login_result']) {
            alert("登录成功!");
            //页面跳转
            //window.location.href='MainTab/home.html';
        } else {
            innerHtml("用户名/密码错误");
        }
    }
}

//插入提示语
function innerHtml(message) {
    document.getElementById("tip").innerHTML = "<span style='font-size:12px; color:red;'>" + message + "</span>";
}
javascript与Ajax的结合,首先创建一个服务器连接对象xmlHttp,然后通过getElementById方法获取到输入的用户名及密码,最后用xmlHttp用POST的方式提交,其中user.php是上一篇文章中的内容。需要注意的是xmlHttp.onreadystatechange = handleResult;这一行,handleResult是我们自定义的回调方法,这里没有括号,原因在于是将整个方法赋予xmlHttp.onreadystatechange,加括号的话就是将方法的返回值赋给它了,需要注意一下。另外,由于handleResult是回调方法,在redayState发生变化时才会触发调用,所以它是后于xmlHttp.send()方法执行的。接下来看我们的主页面:

<html>
    <head>
        <title>Welcome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script language="javascript" type="text/javascript" src="login.js"></script>
        <link href="login.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
        <form>
            <table width="202" border="0" align="center" cellpadding="05" cellspacing="0" id="logintable">
                <tr>
                    <td width="192"><div class="message">欢迎使用MDM管理系统</div></td>
                </tr>
                <tr>
                    <td><input name="name" type="text" id="username" value="" placeholder="用户名"></td>
                </tr>
                <tr>
                    <td><input name="psd" type="password" id="password" value="" placeholder="密码"></td>
                </tr>
                <tr>
                    <td id="tip"> </td>
                </tr>
                <tr>
                    <td><input type="button" class="submit" value="登录" onclick="login()"></td>
                </tr>
            </table>
        </form>    
    </body>
</html>
head中引用了我们上面的login.css以及login.js文件,当然也可以将这两个文件的代码均写到login.html中,效果是一样的,不过这样不利于代码的维护与扩展,所以推荐将样式、业务逻辑及页面分离的思想来构建我们的程序。至此,我们的页面已经可以和后台正常地通信了。

那么最后问题来了,如果我将上面from中最后一个input的type的"button"改为"submit",那么点击登录按钮后发现xmlHttp.status == 0而不是200,且无法收到服务器返回的数据,xmlHttp.responseText一直为空。刚开始百度都说是跨域了,然后解决跨域后发现还是0,这个问题困扰了我好几天,最后无意将type改成button才解决,哪位知道原因的大神麻烦告知一下,感激不尽!

尊重原创,转载请注明原文地址:http://blog.csdn.net/zhugehengheng/article/details/44645363




阅读更多
个人分类: WEB前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭