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 = "" + message + "";
}

javascript与Ajax的结合，首先创建一个服务器连接对象xmlHttp，然后通过getElementById方法获取到输入的用户名及密码，最后用xmlHttp用POST的方式提交，其中user.php是上一篇文章中的内容。需要注意的是xmlHttp.onreadystatechange = handleResult;这一行，handleResult是我们自定义的回调方法，这里没有括号，原因在于是将整个方法赋予xmlHttp.onreadystatechange，加括号的话就是将方法的返回值赋给它了，需要注意一下。另外，由于handleResult是回调方法，在redayState发生变化时才会触发调用，所以它是后于xmlHttp.send()方法执行的。接下来看我们的主页面：

    
        
        
        
        
    
    
    
        

            

                

                    
欢迎使用MDM管理系统
                
                

                    

                
                

                    

                
                

                    
 
                
                

                    

                
            
        
    
    

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