PHP如何通过AJAX方式实现登录功能
author:一佰互联 2019-04-27   click:164

本文实例讲述了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 <?phpclass 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方式实现登录功能,希望对大家的学习有所帮助。