首页>>表单>>jQuery ajax 无刷新登录完整代码(2013-11-04)

jQuery ajax 无刷新登录完整代码

jQuery ajax 无刷新登录完整代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

JavaScript Code
  1. <script>  
  2. function chk_ajax_login_with_php(){  
  3.   var username=document.getElementById("username").value;  
  4.   var password=document.getElementById("password").value;  
  5.    
  6.     var params = "username="+username+"&password="+password;  
  7.            var url = "login.php";  
  8.                 $.ajax({  
  9.                                type: 'POST',  
  10.                                url: url,  
  11.                                dataType: 'html',  
  12.                                data: params,  
  13.                                beforeSend: function() {  
  14.                                  document.getElementById("status").innerHTML= 'checking...'  ;  
  15.                                          },  
  16.                                complete: function() {  
  17.                                           
  18.                                },  
  19.                                success: function(html) {  
  20.                                  
  21.                                        
  22.                                      document.getElementById("status").innerHTML= html;  
  23.                                      if(html=="success"){  
  24.                                         
  25.                                        window.location = "test.php"  
  26.                                        
  27.                                      }  
  28.                                        
  29.                                 }  
  30.                        });  
  31.     
  32.     
  33.     
  34.     
  35.     
  36.     
  37. }  
  38. </script>  

 

XML/HTML Code
  1. <div id='logindiv'>  
  2.       
  3.         <label>Username:</label>  
  4.             <input name="username"  id="username" type="text">  
  5.         <label>Password:</label>  
  6.             <input name="password" id="password" type="password">  
  7.             <input value="Submit" name="submit" class="submit" type="submit" onclick='chk_ajax_login_with_php();'>  
  8.         <div id='status'></div>  
  9. </div>    

login.php

 

PHP Code
  1. <?php  
  2. include "conn.php";  
  3.   if($_POST){  
  4.     
  5.       $username=$_POST['username'];  
  6.       $password=md5($_POST['password']);  
  7.         
  8.        $sql=mysql_query("select * from username_list where username='$username' and password='$password'");  
  9.        $res=mysql_num_rows($sql);  
  10.          
  11.        if($res>0){  
  12.          
  13.           $rs_login=mysql_fetch_assoc($sql);  
  14.           $uid=$rs_login['user_id'];  
  15.           $_SESSION['sess_uid']=$uid;  
  16.           echo "success";  
  17.          
  18.        }else{  
  19.          
  20.          echo "invalid username or password";  
  21.          
  22.        }  
  23.    }  
  24.      
  25. ?>  

 

CSS Code
  1. * {  
  2.         margin: 0px;  
  3.         padding: 0px;outline: none;  
  4.     }  
  5.   
  6.     #logindiv {  
  7.         border: 1px solid #270644;  
  8.         width: 250px;  
  9.         -moz-border-radius: 20px;  
  10.         -webkit-border-radius: 20px;  
  11.         background:  -moz-linear-gradient(19% 75% 90deg,#716D78, #DFD2E8);  
  12.         background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFD2E8), to(#716D78));  
  13.         margin:50px auto;  
  14.         padding: 20px;  
  15.         -moz-box-shadow:0px -5px 300px #270644;  
  16.         -webkit-box-shadow:0px -5px 300px #270644;  
  17.     }  
  18.   
  19.     label {  
  20.         font-size: 12px;  
  21.         font-family: arial, sans-serif;  
  22.         list-style-type: none;  
  23.         color: #000;  
  24.         text-shadow: #000 1px 1px;  
  25.         margin-bottom: 10px;  
  26.         font-weight: bold;  
  27.         letter-spacing: 1px;  
  28.         text-transform: uppercase;  
  29.         display: block;  
  30.     }  
  31.   
  32.     input {  
  33.       -webkit-transition-property: -webkit-box-shadow, background;  
  34.       -webkit-transition-duration: 0.25s;  
  35.         padding: 6px;  
  36.         border-bottom: 0px;  
  37.         border-left: 0px;  
  38.         border-right: 0px;  
  39.         border-top: 1px solid #FFFFFF;  
  40.         -moz-box-shadow: 0px 0px 2px #000;  
  41.         -webkit-box-shadow: 0px 0px 2px #000;  
  42.         margin-bottom: 10px;  
  43.         background: #EDE7F1;  
  44.         width: 230px;  
  45.     }  
  46.   
  47.     input.submit {  
  48.       -webkit-transition-property: -webkit-box-shadow, background;  
  49.       -webkit-transition-duration: 0.25s;  
  50.         width: 100px;  
  51.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5E476F), to(#8B7999));     
  52.         background:  -moz-linear-gradient(19% 75% 90deg,#8B7999, #5E476F);  
  53.         color: #fff;  
  54.         text-transform: uppercase;  
  55.         text-shadow: #000 1px 1px;  
  56.         border-top: 1px solid #ad64e0;  
  57.         margin-top: 10px;  
  58.     }  

 


原文地址:http://www.freejs.net/article_biaodan_98.html