当前位置:首页 > 综合实例 > 列表

php ajax用户登陆验证程序代码

发布:smiling 来源: PHP粉丝网  添加日期:2014-01-16 12:59:58 浏览: 评论:0 

核心代码如下:

  1. <script type="text/javascript">  
  2.    
  3. $(document).ready(function() {  
  4.    
  5.     $("#login").click(function() {  
  6.    
  7.         var action = $("#form1").attr('action');  
  8.    
  9.         var form_data = {  
  10.    
  11.             username: $("#username").val(),  
  12.    
  13.             password: $("#password").val(),  
  14.    
  15.             is_ajax: 1  
  16.    
  17.         };  
  18.    
  19.         $.ajax({  
  20.    
  21.             type: "POST",  
  22.    
  23.             url: action,  
  24.    
  25.             data: form_data,  
  26.    
  27.             success: function(response)  
  28.    
  29.             {  
  30.    
  31.                 if(response == 'success')  
  32.    
  33.                     $("#form1").slideUp('slow'function() {  
  34.    
  35.                         $("#message").html("<p class='success'>登陆成功!</p>");  
  36.    
  37.                     });  
  38.    
  39.                 else 
  40.    
  41.                     $("#message").html("<p class='error'>用户名或密码错误.</p>");     
  42.    
  43.             }  
  44.    
  45.         });  
  46.    
  47.         return false;  
  48.    
  49.     });  
  50.    
  51. });  
  52.    
  53. </script> 

index.php源码,代码如下:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>PHP Login with jQuery AJAX</title> 
  7. <style> 
  8. body, input { 
  9.  font-family: Georgia, "Times New Roman", Times, serif; 
  10. #content { 
  11.  background-color: #eee; 
  12.  width: 300px; 
  13.  margin: 0 auto; 
  14.  border: 1px solid #aaa; 
  15.  -moz-border-radius: 10px; 
  16.  -moz-box-shadow: 0 0 10px #aaa; 
  17.  -webkit-border-radius: 10px; 
  18.  -webkit-box-shadow: 0 0 10px #aaa; 
  19.  padding: 10px; 
  20. #form1 label { 
  21.  display: block; 
  22.  font-size: 16px; 
  23.  line-height: 25px; 
  24. #form1 input[type=text], #form1 input[type=password] { 
  25.  padding: 2px; 
  26.  font-size: 16px; 
  27.  line-height: 20px; 
  28.  width: 250px; 
  29. #form1 input[type=submit] { 
  30.  font-size: 20px; 
  31.  font-weight: bold; 
  32.  padding: 5px; 
  33. .success { 
  34.  color: #060; 
  35. .error { 
  36.  color: red; 
  37. </style> 
  38. <script type="text/javascript" src="jquery-1.5.2.min.js"></script> 
  39. <script type="text/javascript"
  40. $(document).ready(function() { 
  41.  
  42.  $("#login").click(function() { 
  43.  
  44.   var action = $("#form1").attr('action'); 
  45.   var form_data = { 
  46.    username: $("#username").val(), 
  47.    password: $("#password").val(), 
  48.    is_ajax: 1 
  49.   }; 
  50.    
  51.   $.ajax({ 
  52.    type: "POST"
  53.    url: action, 
  54.    data: form_data, 
  55.    success: function(response) 
  56.    { 
  57.     if(response == 'success'
  58.      $("#form1").slideUp('slow'function() { 
  59.       $("#message").html("<p class='success'>You have logged in successfully!</p>"); 
  60.      }); 
  61.     else 
  62.      $("#message").html("<p class='error'>Invalid username and/or password.</p>");  
  63.    } 
  64.   }); 
  65.    
  66.   return false; 
  67.  }); 
  68.  
  69. }); 
  70. </script> 
  71. </head> 
  72. <body> 
  73. <p>&nbsp;</p> 
  74. <div id="content"
  75.   <h1>Login Form</h1> 
  76.   <form id="form1" name="form1" action="doLogin.php" method="post"
  77.     <p> 
  78.       <label for="username">Username: </label> 
  79.       <input type="text" name="username" id="username" /> 
  80.     </p> 
  81.     <p> 
  82.       <label for="password">Password: </label> 
  83.       <input type="password" name="password" id="password" /> 
  84.     </p> 
  85.     <p> 
  86.       <input type="submit" id="login" name="login" /> 
  87.     </p> 
  88.   </form> 
  89.     <div id="message"></div> 
  90. </div> 
  91. </body> 
  92. </html> 

loin.php代码如下:

  1. <?php 
  2.  $is_ajax = $_REQUEST['is_ajax']; 
  3.  if(isset($is_ajax) && $is_ajax
  4.  { 
  5.   $username = $_REQUEST['username']; 
  6.   $password = $_REQUEST['password']; 
  7.    
  8.   if($username == 'demo' && $password == 'demo'
  9.   { 
  10.    echo "success";  
  11.   } 
  12.  } 
  13. ?> 

Tags: ajax 用户登陆 验证

分享到: