网站地图    收藏   

子栏目

主页 > php专栏 > php综合实列 >

php ajax用户登陆验证程序代码 - 综合实例

来源：自学PHP网    时间：2014-12-02 13:09 作者： 阅读:次

[导读] 核心代码如下:scripttype=text javascript$(document) ready(function(){$( login) click(function(){varaction=$( form1) attr(...

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

核心代码如下:

  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. } 
  11. #content { 
  12.  background-color: #eee; 
  13.  width: 300px; 
  14.  margin: 0 auto; 
  15.  border: 1px solid #aaa; 
  16.  -moz-border-radius: 10px; 
  17.  -moz-box-shadow: 0 0 10px #aaa; 
  18.  -webkit-border-radius: 10px; 
  19.  -webkit-box-shadow: 0 0 10px #aaa; 
  20.  padding: 10px; 
  21. } 
  22. #form1 label { 
  23.  display: block; 
  24.  font-size: 16px; 
  25.  line-height: 25px; 
  26. } 
  27. #form1 input[type=text], #form1 input[type=password] { 
  28.  padding: 2px; 
  29.  font-size: 16px; 
  30.  line-height: 20px; 
  31.  width: 250px; 
  32. } 
  33. #form1 input[type=submit] { 
  34.  font-size: 20px; 
  35.  font-weight: bold; 
  36.  padding: 5px; 
  37. } 
  38. .success { 
  39.  color: #060; 
  40. } 
  41. .error { 
  42.  color: red; 
  43. } 
  44. </style> 
  45. <script type="text/javascript" src="jquery-1.5.2.min.js"></script> 
  46. <script type="text/javascript"> 
  47. $(document).ready(function() { 
  48.  
  49.  $("#login").click(function() { 
  50.  
  51.   var action = $("#form1").attr('action'); 
  52.   var form_data = { 
  53.    username: $("#username").val(), 
  54.    password: $("#password").val(), 
  55.    is_ajax: 1 
  56.   }; 
  57.    
  58.   $.ajax({ 
  59.    type: "POST", 
  60.    url: action, 
  61.    data: form_data, 
  62.    success: function(response) 
  63.    { 
  64.     if(response == 'success') 
  65.      $("#form1").slideUp('slow', function() { 
  66.       $("#message").html("<p class='success'>You have logged in successfully!</p>"); 
  67.      }); 
  68.     else 
  69.      $("#message").html("<p class='error'>Invalid username and/or password.</p>");  
  70.    } 
  71.   }); 
  72.    
  73.   return false; 
  74.  }); 
  75.  
  76. }); 
  77. </script> 
  78. </head> 
  79. <body> 
  80. <p>&nbsp;</p> 
  81. <div id="content"> 
  82.   <h1>Login Form</h1> 
  83.   <form id="form1" name="form1" action="doLogin.php" method="post"> 
  84.     <p> 
  85.       <label for="username">Username: </label> 
  86.       <input type="text" name="username" id="username" /> 
  87.     </p> 
  88.     <p> 
  89.       <label for="password">Password: </label> 
  90.       <input type="password" name="password" id="password" /> 
  91.     </p> 
  92.     <p> 
  93.       <input type="submit" id="login" name="login" /> 
  94.     </p> 
  95.   </form> 
  96.     <div id="message"></div> 
  97. </div> 
  98. </body> 
  99. </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. ?> 

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论