PHP如何通过AJAX方式实现登录功能

前端技术 2023/09/02 PHP

本文实例讲述了Ajax+PHP+MySQL登陆示例。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

1 login.php
登录界面中,javascript脚本用ajax方式异步请求dologin.php,dologin.php负责用户信息验证(包括验证码,php生成验证码可以自行搜索).登录界面的代码如下:

<?php session_start();?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
 <head>
 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
 <title>login</title>
 <link rel=\"stylesheet\" type=\"text/css\" href=\"CSS/login.css\" />
 <script src=\"JS/ajaxhelper.js\" type=\"text/javascript\"></script>
 <script src=\"JS/jquery-1.3.2.min.js\" type=\"text/javascript\"></script>
 <script type=\"text/javascript\">
  function chkForm() {
   if (m$(\'username\').value == \"\") {

    alert(\'用户名不能为空.\');
    m$(\'username\').focus();
    return false;

   }
   if (m$(\'password\').value == \"\") {

    alert(\'密码不能为空.\');
    m$(\'password\').focus();
    return false;

   }
   if (m$(\'password\').value != \"\" && m$(\'username\').value != \"\") {

    var xmlhttp = createRequest();
    if (xmlhttp) {
     m$(\'loading\').innerHTML = \"<font color=\'red\'>loading...</font>\";
     var username = m$(\'username\').value;
     var pwd = m$(\'password\').value;
     var code = m$(\'txtCode\').value;
     var url = \"dologin.php\";
     xmlhttp.open(\"POST\", url, true);
     xmlhttp.onreadystatechange = ValidateResult;
     xmlhttp.setRequestHeader(\"Content-Type\", \"application/x-www-form-urlencoded\");
     xmlhttp.send(\"username=\" + escape(username) + \"&password=\" + escape(pwd) + \"&code=\" + escape(code));

    } else {
     alert(\'xmlHttp创建失败.\');

    }

    function ValidateResult() {
     if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
       if (xmlhttp.responseText != \"\") {

        //window.alert(xmlhttp.responseText);
        var obj = eval(\"(\" + xmlhttp.responseText + \")\");
        if (obj.result == true) {
         alert(\"提示:\" + obj.info);
         window.location = \'index.php\';

        } else {
         alert(\"错误:\" + obj.info);

        }
       } else {
        window.alert(\"从服务器获取失败\");

        window.location.reload();
       }
       m$(\'loading\').innerHTML = \"\";
      }
     }

    }


   }

  }

  function m$(id) {
   return document.getElementById(id);
  }

  function changeCode() {
   var xmlhttp = createRequest();
   if (xmlhttp) {
    m$(\'loading\').innerHTML = \"<font color=\'red\'>loading...</font>\";
    var dt = new Date().getTime();
    // alert(dt);
    var url = \"function/imagecode.php?dummay\" + escape(dt);
    xmlhttp.open(\"GET\", url, true);
    xmlhttp.onreadystatechange = ValidateResult;
    xmlhttp.send(null);

   } else {
    alert(\'xmlHttp创建失败.\');

   }

   function ValidateResult() {
    if (xmlhttp.readyState == 4) {
     if (xmlhttp.status == 200) {
      var dt = new Date().getTime();
      var url = \"function/imagecode.php?dummay\" + escape(dt);
      m$(\'imgCode\').src = \"function/imagecode.php?dummay\" + escape(dt);
      m$(\'loading\').innerHTML = \"\";
     }
    }

   }
  }

  function showTool() {
   $(\'#divToolTip\').css(\"display\", \"block\");
  }

  function hideTool() {
   $(\'#divToolTip\').css(\"display\", \"none\");
  }
  window.onload = initPage;

  function initPage() {
   $(\'#divToolTip\').css(\"display\", \"none\");
  }
 </script>
 </head>
 <body>
 <div style=\"background-color:#2A3F55; height:80px;\">
  
 </div>
 <div style=\"min-height:500px;\">
  
  <div class=\"left\">
  
  <div style=\"margin:120px auto auto auto; height:300px; text-align:left\">
   <div style=\"font-size:26px;color:#2A3F55; text-align:center;\">Ajax PHP Demo System
   <img src=\"Images/appstorm-icon.png\" alt=\"appcation storm image\" style=\"position:relative;top:-18px; left:-12px;         vertical-align:middle; text-align:center;font-size:10px; width:65px; height:46px;\"/>
   </div>
   <br/>
   <hr style=\"border:dashed thin #2A3F55;width:70%; text-align:center;\"/>
   <div style=\"font-size:13px;color:#999999; margin:20px auto 0 auto; padding-left:200px;\">
   Author:<a href=\"#\" onmousemove=\"showTool();\" onmouseout=\"hideTool();\">wangming</a>
   </div>
   <div style=\"font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;\">DateTime:2009-9-1</div>
   <div style=\"font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;\">Version:1.0.0</div>
   <div style=\"font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;\">Email:wangmingemail@163.com     </div>
   <div id=\"divToolTip\">
   <img src=\"Images/ming.jpg\" height=\"86px;\"/>
   <span class=\"authordes\">
    <br/>
    姓名:wangming<br/>
    电商06-2<br/>
   </span>
   
   </div>
   
  </div>
  
  </div>
  
  <div class=\"right\">
  
  <form>
   <br/>
   <table class=\"flogin\">
   <tr>
    <td>用户名:</td>
    <td><input type=\"text\" name=\"username\" id=\"username\"/></td>
    <td></td>
   </tr>
   <tr>
    <td>密   码:</td>
    <td><input type=\"password\" name=\"password\" id=\"password\" /></td>
    <td></td>
   </tr>
   <tr>
    <td>验证码:</td>
    <td>
    <input type=\"text\" name=\"txtCode\" id=\"txtCode\" size=\"12\" /> 
    <img src=\"function/imagecode.php\" id=\"imgCode\" alt=\"image code\" height=\"22px;\" style=\" vertical-align:bottom;\"/>
    </td>
    <td><input type=\"button\" class=\"btnrefresh\" onclick=\"changeCode();\" /></td>
   </tr>
   <tr>
    <td></td>
    <td><input type=\"button\" class=\"btnlogin\" onclick=\"chkForm();\" /></td>
    <td></td>
   </tr>
   <tr>
    <td></td>
    <td><span id=\"loading\"></span></td>
    <td><span id=\"code\"></span></td>
   </tr>
   
   </table>
  </form>
  </div>
  
 </div>
 <div style=\"background-color:#2A3F55; height:60px; margin:auto 0 0 0; clear:both; text-align:center; line-height:60px; color:#FFFFFF;font-size:12px;\">
  ©Copyright 2015.
 </div>
 </body>
</html>

2 ajaxhelper.js

function createRequest() {
 try {
  request = new XMLHttpRequest();
 } catch (tryMS) {
  try {
   request = new ActiveXObject(\"Msxml2.XMLHTTP\");
  } catch (otherMS) {
   try {
    request = new ActiveXObject(\"Microsoft.XMLHTTP\");
   } catch (failed) {
    request = null;
   }
  }
 }
 return request;
}

function getActivatedObject(e) {
 var obj;
 if (!e) {
  // early version of IE
  obj = window.event.srcElement;
 } else if (e.srcElement) {
  // IE 7 or later
  obj = e.srcElement;
 } else {
  // DOM Level 2 browser
  obj = e.target;
 }
 return obj;
}

function addEventHandler(obj, eventName, handler) {
 if (document.attachEvent) {
  obj.attachEvent(\"on\" + eventName, handler);
 } else if (document.addEventListener) {
  obj.addEventListener(eventName, handler, false);
 }
}

3 dologin.php

<?php
 session_start();
 header(\"Content-type:text/html;charset=gb2312\");//防止返回的中文乱码
 $name=$_POST[\'username\'];
 $pwd=$_POST[\'password\'];
 $imagecode=$_POST[\'code\'];
 if(strtoupper($imagecode)==$_SESSION[\"code\"])
 {
  include(\"conn/conn.php\");
  $sql=\"select studentName,studentPwd from tbstudent where studentId=\'\".$name.\"\'\";
  $result=mysql_query($sql,$conn);
  if($row=mysql_fetch_assoc($result))
  {
   if($pwd==$row[\'studentPwd\'])
   {
   $_SESSION[\'username\']=$row[\'studentName\'];
   //echo \"{\'result\':true,\'info\':\'登陆成功!\',\'code\':\'\".$_SESSION[\"code\"].\"\'}\";
   echo \"{\'result\':true,\'info\':\'登陆成功!\'}\";
   
   }
   else
   {
   echo \"{\'result\':false,\'info\':\'密码错误!\'}\";
   }
  }
  else
  {
   echo \"{\'result\':false,\'info\':\'该用户不存在!\'}\";
  }
 }
 else
 {
  echo \"{\'result\':false,\'info\':\'验证码错误!\'}\";
 }
?>

4 conn.php

<?php
 $conn=$mysql_connect(\"localhost\",\"root\", \"\");
 mysql_select_db(\"bbs\",$conn);
 mysql_query(\"SET NAMES GB2312\");
 ?>
 5
 <?php
class Users {
 function Users() {
 }
 function checkLogin($username, $userpwd) {
  try {
   mysql_connect(\"localhost\", \"root\", \"123\");
   mysql_select_db(\"studentdb\");
   mysql_query(\"SET NAMES GB2312\");
   $sql = \"select userid from tbuser where username=\'$username\' and userpwd=\'\" . md5(trim($userpwd)) . \"\'\";
   $result = mysql_query($sql);
   if ($result) {
    $arr = mysql_fetch_row($result);
    $uid = $arr[0];
    if ($uid != \"\") {
     return \"true|$uid login ok.$sql\";
     mysql_close();
    } else {
     return \"false|login failed!$sql\";
     mysql_close();
    }
   } else {
    return \"false|$result link db failed!\";
    mysql_close();
   }
  }
  catch(Exception $ex) {
   return \"false|$ex\";
   mysql_close();
  }
 }
 function AddUser($name, $pwd) {
  try {
   mysql_connect(\"localhost\", \"root\", \"123\");
   mysql_select_db(\"studentdb\");
   mysql_query(\"set names gb2312\");
   $sql0 = mysql_query(\"select userid from tbuser where username=\'$name\'\");
   $info0 = mysql_fetch_array($sql0);
   $userid = $info0[0];
   if ($info0 != false) {
    return \"false | $name is exisis.(id:$userid)\";
   }
   $pwd = md5(trim($pwd));
   $query = mysql_query(\"insert into tbuser(username,userpwd)values(\'$name\',\'$pwd\')\");
   $error = mysql_errno();
   if ($query) {
    return \"true | add ok\";
   } else {
    return \"false | $error\";
   }
  }
  catch(Exception $ex) {
   return \"false | $ex\";
  }
 }
 function DeleteUser($name) {
  mysql_connect(\"localhost\", \"root\", \"123\");
  mysql_select_db(\"studentdb\");
  mysql_query(\"set names gb2312\");
  $name = trim($name);
  $sql0 = mysql_query(\"select userid from tbuser where username=\'$name\'\");
  $info0 = mysql_fetch_array($sql0);
  if ($info0 != false) {
   if (mysql_query(\"delete from tbuser where username=\'$name\'\")) {
    return \"true | delete ok.(id:\" . $info0[0] . \")\";
   } else {
    return \"false | 删除失败\";
   }
  } else {
   return \"false | 删除失败 $name 不存在\";
  }
 }
 function UpdateUser($id, $name, $pwd) {
  if (is_numeric(intval(trim($id)))) {
   if ($id && $name && $pwd) {
    mysql_connect(\"localhost\", \"root\", \"123\");
    mysql_select_db(\"studentdb\");
    mysql_query(\"set names gb2312\");
    $pwd = md5(trim($pwd));
    $isexists = mysql_query(\"select * from tbuser where userid=\'$id\'\");
    if (mysql_fetch_array($isexists)) {
     $sql0 = mysql_query(\"update tbuser set username=\'$name\',userpwd=\'$pwd\' where userid= $id\");
     if ($sql0) {
      return \"ture | update ok\";
     } else {
      return \"false | 更新失败\";
     }
    } else {
     return \"false | usrid=$id not exists.\";
    }
   } else {
    return \"false |id=$id name=$name and pwd=$pwd .At least one of them is null.\";
   }
  } else {
   return \"false | $id is not type of int.\";
  }
 }
}
?>

与登录无关，只为了记录一下PHP如何在数据库MYSQL上实现CURD操作.

以上就是告诉了大家PHP如何通过AJAX方式实现登录功能，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/5700

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案