45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:PHP通过AJAX方式实现登录功能的方法技巧

PHP通过AJAX方式实现登录功能的方法技巧

2016-03-03 20:10:11 来源:www.45fan.com 【

PHP通过AJAX方式实现登录功能的方法技巧

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


本文地址:http://www.45fan.com/bcdm/41143.html
Tags: 通过 PHP ajax
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部