jQuery ajax 无刷新登录完整代码

hugebait

2013-11-26

jQuery ajax 无刷新登录完整代码

JavaScript Code
<script>  
function chk_ajax_login_with_php(){  
  var username=document.getElementById("username").value;  
  var password=document.getElementById("password").value;  
   
    var params = "username="+username+"&password="+password;  
           var url = "login.php";  
                $.ajax({  
                               type: 'POST',  
                               url: url,  
                               dataType: 'html',  
                               data: params,  
                               beforeSend: function() {  
                                 document.getElementById("status").innerHTML= 'checking...'  ;  
                                         },  
                               complete: function() {  
                                          
                               },  
                               success: function(html) {  
                                 
                                       
                                     document.getElementById("status").innerHTML= html;  
                                     if(html=="success"){  
                                        
                                       window.location = "test.php"  
                                       
                                     }  
                                       
                                }  
                       });  
    
    
    
    
    
    
}  
</script>  

XML/HTML Code
<div id='logindiv'>  
      
        <label>Username:</label>  
            <input name="username"  id="username" type="text">  
        <label>Password:</label>  
            <input name="password" id="password" type="password">  
            <input value="Submit" name="submit" class="submit" type="submit" onclick='chk_ajax_login_with_php();'>  
        <div id='status'></div>  
</div>    

PHP Code
<?php  
include "conn.php";  
  if($_POST){  
    
      $username=$_POST['username'];  
      $password=md5($_POST['password']);  
        
       $sql=mysql_query("select * from username_list where username='$username' and password='$password'");  
       $res=mysql_num_rows($sql);  
         
       if($res>0){  
         
          $rs_login=mysql_fetch_assoc($sql);  
          $uid=$rs_login['user_id'];  
          $_SESSION['sess_uid']=$uid;  
          echo "success";  
         
       }else{  
         
         echo "invalid username or password";  
         
       }  
   }  
     
?>  

CSS Code
* {  
        margin: 0px;  
        padding: 0px;outline: none;  
    }  
  
    #logindiv {  
        border: 1px solid #270644;  
        width: 250px;  
        -moz-border-radius: 20px;  
        -webkit-border-radius: 20px;  
        background:  -moz-linear-gradient(19% 75% 90deg,#716D78, #DFD2E8);  
        background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFD2E8), to(#716D78));  
        margin:50px auto;  
        padding: 20px;  
        -moz-box-shadow:0px -5px 300px #270644;  
        -webkit-box-shadow:0px -5px 300px #270644;  
    }  
  
    label {  
        font-size: 12px;  
        font-family: arial, sans-serif;  
        list-style-type: none;  
        color: #000;  
        text-shadow: #000 1px 1px;  
        margin-bottom: 10px;  
        font-weight: bold;  
        letter-spacing: 1px;  
        text-transform: uppercase;  
        display: block;  
    }  
  
    input {  
      -webkit-transition-property: -webkit-box-shadow, background;  
      -webkit-transition-duration: 0.25s;  
        padding: 6px;  
        border-bottom: 0px;  
        border-left: 0px;  
        border-right: 0px;  
        border-top: 1px solid #FFFFFF;  
        -moz-box-shadow: 0px 0px 2px #000;  
        -webkit-box-shadow: 0px 0px 2px #000;  
        margin-bottom: 10px;  
        background: #EDE7F1;  
        width: 230px;  
    }  
  
    input.submit {  
      -webkit-transition-property: -webkit-box-shadow, background;  
      -webkit-transition-duration: 0.25s;  
        width: 100px;  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5E476F), to(#8B7999));     
        background:  -moz-linear-gradient(19% 75% 90deg,#8B7999, #5E476F);  
        color: #fff;  
        text-transform: uppercase;  
        text-shadow: #000 1px 1px;  
        border-top: 1px solid #ad64e0;  
        margin-top: 10px;  
    }  