欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-21 20:32:47
本文实例讲述了ajax+php+mysql登陆示例。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 1 login.php 登录界面中,j...

本文实例讲述了ajax+php+mysql登陆示例。分享给大家供大家参考。具体如下:
运行效果截图如下:

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

具体代码如下:

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方式实现登录功能,希望对大家的学习有所帮助。