jQuery ajax 无刷新登录完整代码

jQuery ajax 无刷新登录完整代码

 

演示

 

JavaScript Code

  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span> chk_ajax_login_with_php(){  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  <span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> username=document.getElementById(</span><span class="string" style="color:#0000FF;">"username"</span><span>).value;  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  <span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> password=document.getElementById(</span><span class="string" style="color:#0000FF;">"password"</span><span>).value;  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">   </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">    <span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> params = </span><span class="string" style="color:#0000FF;">"username="</span><span>+username+</span><span class="string" style="color:#0000FF;">"&password="</span><span>+password;  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">           <span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> url = </span><span class="string" style="color:#0000FF;">"login.php"</span><span>;  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                $.ajax({  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                               type: <span class="string" style="color:#0000FF;">'POST'</span><span>,  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                               url: url,  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                               dataType: <span class="string" style="color:#0000FF;">'html'</span><span>,  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                               data: params,  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                               beforeSend: <span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>() {  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                                 document.getElementById(<span class="string" style="color:#0000FF;">"status"</span><span>).innerHTML= </span><span class="string" style="color:#0000FF;">'checking...'</span><span>  ;  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                         },  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                               complete: <span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>() {  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                          </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                               },  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                               success: <span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>(html) {  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                                 </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                       </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                                     document.getElementById(<span class="string" style="color:#0000FF;">"status"</span><span>).innerHTML= html;  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                     <span class="keyword" style="color:#0000FF;font-weight:bold;">if</span><span>(html==</span><span class="string" style="color:#0000FF;">"success"</span><span>){  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                                        </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                       window.location = <span class="string" style="color:#0000FF;">"test.php"</span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                                       </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                     }  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                                       </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">                                }  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">                       });  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">    </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">    </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">    </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">    </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">    </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">    </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">}  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">

 

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>

login.php

 

PHP Code

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;
    }

 

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