PHP是一门很好的语言,可以很方便的开发web应用程序,下面介绍一下PHP如何通过AJAX方式实现登录功能:

1 login.php

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

  1.  <?php session_start();?>
  2.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  <html xmlns="http://www.w3.org/1999/xhtml">
  4.    <head>
  5.      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6.      <title>login</title>
  7.      <link rel="stylesheet" type="text/css" href="CSS/login.css" />
  8.      <script src="JS/ajaxhelper.js" type="text/javascript"></script>
  9.      <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
  10.      <script type="text/javascript">
  11.          function chkForm() {
  12.              if (m$('username').value == "") {
  13.  
  14.                  alert('用户名不能为空.');
  15.                  m$('username').focus();
  16.                  return false;
  17.  
  18.              }
  19.              if (m$('password').value == "") {
  20.  
  21.                  alert('密码不能为空.');
  22.                  m$('password').focus();
  23.                  return false;
  24.  
  25.              }
  26.              if (m$('password').value != "" && m$('username').value != "") {
  27.  
  28.                  var xmlhttp = createRequest();
  29.                  if (xmlhttp) {
  30.                      m$('loading').innerHTML = "<font color='red'>loading...</font>";
  31.                      var username = m$('username').value;
  32.                      var pwd = m$('password').value;
  33.                      var code = m$('txtCode').value;
  34.                      var url = "dologin.php";
  35.                      xmlhttp.open("POST", url, true);
  36.                      xmlhttp.onreadystatechange = ValidateResult;
  37.                      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  38.                      xmlhttp.send("username=" + escape(username) + "&password=" + escape(pwd) + "&code=" + escape(code));
  39.  
  40.                  } else {
  41.                      alert('xmlHttp创建失败.');
  42.  
  43.                  }
  44.  
  45.                  function ValidateResult() {
  46.                      if (xmlhttp.readyState == 4) {
  47.                          if (xmlhttp.status == 200) {
  48.                              if (xmlhttp.responseText != "") {
  49.  
  50.                                  //window.alert(xmlhttp.responseText);
  51.                                  var obj = eval("(" + xmlhttp.responseText + ")");
  52.                                  if (obj.result == true) {
  53.                                      alert("提示:" + obj.info);
  54.                                      window.location = 'index.php';
  55.  
  56.                                  } else {
  57.                                      alert("错误:" + obj.info);
  58.  
  59.                                  }
  60.                              } else {
  61.                                  window.alert("从服务器获取失败");
  62.  
  63.                                  window.location.reload();
  64.                              }
  65.                              m$('loading').innerHTML = "";
  66.                          }
  67.                      }
  68.  
  69.                  }
  70.  
  71.              }
  72.  
  73.          }
  74.  
  75.          function m$(id) {
  76.              return document.getElementById(id);
  77.          }
  78.  
  79.          function changeCode() {
  80.              var xmlhttp = createRequest();
  81.              if (xmlhttp) {
  82.                  m$('loading').innerHTML = "<font color='red'>loading...</font>";
  83.                  var dt = new Date().getTime();
  84.                  // alert(dt);
  85.                  var url = "function/imagecode.php?dummay" + escape(dt);
  86.                  xmlhttp.open("GET", url, true);
  87.                  xmlhttp.onreadystatechange = ValidateResult;
  88.                  xmlhttp.send(null);
  89.  
  90.              } else {
  91.                  alert('xmlHttp创建失败.');
  92.  
  93.              }
  94.  
  95.              function ValidateResult() {
  96.                  if (xmlhttp.readyState == 4) {
  97.                      if (xmlhttp.status == 200) {
  98.                          var dt = new Date().getTime();
  99.                          var url = "function/imagecode.php?dummay" + escape(dt);
  100.                          m$('imgCode').src = "function/imagecode.php?dummay" + escape(dt);
  101.                          m$('loading').innerHTML = "";
  102.                      }
  103.                  }
  104.  
  105.              }
  106.          }
  107.  
  108.          function showTool() {
  109.              $('#divToolTip').css("display", "block");
  110.          }
  111.  
  112.          function hideTool() {
  113.              $('#divToolTip').css("display", "none");
  114.          }
  115.          window.onload = initPage;
  116.  
  117.          function initPage() {
  118.              $('#divToolTip').css("display", "none");
  119.          }
  120.      </script>
  121.    </head>
  122.    <body>
  123.      <div style="background-color:#2A3F55; height:80px;">
  124.  
  125.      </div>
  126.      <div style="min-height:500px;">
  127.  
  128.        <div class="left">
  129.  
  130.          <div style="margin:120px auto auto auto; height:300px; text-align:left">
  131.            <div style="font-size:26px;color:#2A3F55; text-align:center;">Ajax PHP Demo System
  132.              <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;"/>
  133.            </div>
  134.            <br/>
  135.            <hr style="border:dashed thin #2A3F55;width:70%; text-align:center;"/>
  136.            <div style="font-size:13px;color:#999999; margin:20px auto 0 auto; padding-left:200px;">
  137.              Author:<a href="#" onmousemove="showTool();" onmouseout="hideTool();">wangming</a>
  138.            </div>
  139.            <div style="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;">DateTime:2009-9-1</div>
  140.            <div style="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;">Version:1.0.0</div>
  141.            <div style="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;">Email:wangmingemail@163.com                   </div>
  142.            <div id="divToolTip">
  143.              <img src="Images/ming.jpg" height="86px;"/>
  144.              <span class="authordes">
  145.                <br/>
  146.                姓名:wangming<br/>
  147.                电商06-2<br/>
  148.              </span>
  149.  
  150.            </div>
  151.  
  152.          </div>
  153.  
  154.        </div>
  155.  
  156.        <div class="right">
  157.  
  158.          <form>
  159.            <br/>
  160.            <table class="flogin">
  161.              <tr>
  162.                <td>用户名:</td>
  163.                <td><input type="text" name="username" id="username"/></td>
  164.                <td></td>
  165.              </tr>
  166.              <tr>
  167.                <td>密&nbsp;&nbsp;&nbsp;码:</td>
  168.                <td><input type="password" name="password" id="password" /></td>
  169.                <td></td>
  170.              </tr>
  171.              <tr>
  172.                <td>验证码:</td>
  173.                <td>
  174.                  <input type="text" name="txtCode" id="txtCode" size="12" />&nbsp;
  175.                  <img src="function/imagecode.php" id="imgCode" alt="image code" height="22px;" style=" vertical-align:bottom;"/>
  176.                </td>
  177.                <td><input type="button"  class="btnrefresh" onclick="changeCode();" /></td>
  178.              </tr>
  179.              <tr>
  180.                <td></td>
  181.                <td><input type="button"  class="btnlogin" onclick="chkForm();" /></td>
  182.                <td></td>
  183.              </tr>
  184.              <tr>
  185.                <td></td>
  186.                <td><span id="loading"></span></td>
  187.                <td><span id="code"></span></td>
  188.              </tr>
  189.  
  190.            </table>
  191.          </form>
  192.        </div>
  193.  
  194.      </div>
  195.      <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;">
  196.        &copy;Copyright 2015.
  197.      </div>
  198.    </body>
  199.  </html>

2 ajaxhelper.js

  1.  function createRequest() {
  2.      try {
  3.          request = new XMLHttpRequest();
  4.      } catch (tryMS) {
  5.          try {
  6.              request = new ActiveXObject("Msxml2.XMLHTTP");
  7.          } catch (otherMS) {
  8.              try {
  9.                  request = new ActiveXObject("Microsoft.XMLHTTP");
  10.              } catch (failed) {
  11.                  request = null;
  12.              }
  13.          }
  14.      }
  15.      return request;
  16.  }
  17.  
  18.  function getActivatedObject(e) {
  19.      var obj;
  20.      if (!e) {
  21.          // early version of IE
  22.          obj = window.event.srcElement;
  23.      } else if (e.srcElement) {
  24.          // IE 7 or later
  25.          obj = e.srcElement;
  26.      } else {
  27.          // DOM Level 2 browser
  28.          obj = e.target;
  29.      }
  30.      return obj;
  31.  }
  32.  
  33.  function addEventHandler(obj, eventName, handler) {
  34.      if (document.attachEvent) {
  35.          obj.attachEvent("on" + eventName, handler);
  36.      } else if (document.addEventListener) {
  37.          obj.addEventListener(eventName, handler, false);
  38.      }
  39.  }

3 dologin.php

  1.  <?php
  2.      session_start();
  3.      header("Content-type:text/html;charset=gb2312");//防止返回的中文乱码
  4.      $name=$_POST['username'];
  5.      $pwd=$_POST['password'];
  6.      $imagecode=$_POST['code'];
  7.      if(strtoupper($imagecode)==$_SESSION["code"])
  8.      {
  9.         include("conn/conn.php");
  10.         $sql="select studentName,studentPwd from tbstudent where studentId='".$name."'";
  11.         $result=mysql_query($sql,$conn);
  12.         if($row=mysql_fetch_assoc($result))
  13.         {
  14.           if($pwd==$row['studentPwd'])
  15.           {
  16.            $_SESSION['username']=$row['studentName'];
  17.              //echo "{'result':true,'info':'登陆成功!','code':'".$_SESSION["code"]."'}";
  18.              echo "{'result':true,'info':'登陆成功!'}";
  19.  
  20.           }
  21.           else
  22.           {
  23.              echo "{'result':false,'info':'密码错误!'}";
  24.           }
  25.         }
  26.        else
  27.        {
  28.            echo "{'result':false,'info':'该用户不存在!'}";
  29.        }
  30.     }
  31.     else
  32.     {
  33.         echo "{'result':false,'info':'验证码错误!'}";
  34.     }
  35.  ?>

4 conn.php

  1.  <?php
  2.   $conn=$mysql_connect("localhost","root", "");
  3.   mysql_select_db("bbs",$conn);
  4.   mysql_query("SET NAMES GB2312");
  5.  ?>

5 user.php

  1.  <?php
  2.  class Users {
  3.      function Users() {
  4.      }
  5.      function checkLogin($username, $userpwd) {
  6.          try {
  7.              mysql_connect("localhost", "root", "123");
  8.              mysql_select_db("studentdb");
  9.              mysql_query("SET NAMES GB2312");
  10.              $sql = "select userid from tbuser where username='$username' and userpwd='" . md5(trim($userpwd)) . "'";
  11.              $result = mysql_query($sql);
  12.              if ($result) {
  13.                  $arr = mysql_fetch_row($result);
  14.                  $uid = $arr[0];
  15.                  if ($uid != "") {
  16.                      return "true|$uid login ok.$sql";
  17.                      mysql_close();
  18.                  } else {
  19.                      return "false|login failed!$sql";
  20.                      mysql_close();
  21.                  }
  22.              } else {
  23.                  return "false|$result link db failed!";
  24.                  mysql_close();
  25.              }
  26.          }
  27.          catch(Exception $ex) {
  28.              return "false|$ex";
  29.              mysql_close();
  30.          }
  31.      }
  32.      function AddUser($name, $pwd) {
  33.          try {
  34.              mysql_connect("localhost", "root", "123");
  35.              mysql_select_db("studentdb");
  36.              mysql_query("set names gb2312");
  37.              $sql0 = mysql_query("select userid from tbuser where username='$name'");
  38.              $info0 = mysql_fetch_array($sql0);
  39.              $userid = $info0[0];
  40.              if ($info0 != false) {
  41.                  return "false | $name is exisis.(id:$userid)";
  42.              }
  43.              $pwd = md5(trim($pwd));
  44.              $query = mysql_query("insert into tbuser(username,userpwd)values('$name','$pwd')");
  45.              $error = mysql_errno();
  46.              if ($query) {
  47.                  return "true | add ok";
  48.              } else {
  49.                  return "false | $error";
  50.              }
  51.          }
  52.          catch(Exception $ex) {
  53.              return "false | $ex";
  54.          }
  55.      }
  56.      function DeleteUser($name) {
  57.          mysql_connect("localhost", "root", "123");
  58.          mysql_select_db("studentdb");
  59.          mysql_query("set names gb2312");
  60.          $name = trim($name);
  61.          $sql0 = mysql_query("select userid from tbuser where username='$name'");
  62.          $info0 = mysql_fetch_array($sql0);
  63.          if ($info0 != false) {
  64.              if (mysql_query("delete from tbuser where username='$name'")) {
  65.                  return "true | delete ok.(id:" . $info0[0] . ")";
  66.              } else {
  67.                  return "false | 删除失败";
  68.              }
  69.          } else {
  70.              return "false | 删除失败 $name 不存在";
  71.          }
  72.      }
  73.      function UpdateUser($id, $name, $pwd) {
  74.          if (is_numeric(intval(trim($id)))) {
  75.              if ($id && $name && $pwd) {
  76.                  mysql_connect("localhost", "root", "123");
  77.                  mysql_select_db("studentdb");
  78.                  mysql_query("set names gb2312");
  79.                  $pwd = md5(trim($pwd));
  80.                  $isexists = mysql_query("select * from tbuser where userid='$id'");
  81.                  if (mysql_fetch_array($isexists)) {
  82.                      $sql0 = mysql_query("update tbuser set username='$name',userpwd='$pwd' where userid= $id");
  83.                      if ($sql0) {
  84.                          return "ture | update ok";
  85.                      } else {
  86.                          return "false | 更新失败";
  87.                      }
  88.                  } else {
  89.                      return "false | usrid=$id not exists.";
  90.                  }
  91.              } else {
  92.                  return "false |id=$id name=$name  and pwd=$pwd .At least one of them is null.";
  93.              }
  94.          } else {
  95.              return "false | $id is not type of int.";
  96.          }
  97.      }
  98.  }
  99.  ?>

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

6 效果图

Ajax+PHP+MySQL 登陆示例的更多相关文章

  1. AJAX 与 MySQL

    AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 实例   Select a person:   P ...

  2. JAVA使用jdbc连接MYSQL简单示例

    以下展示的为JAVA使用jdbc连接MYSQL简单示例: import java.sql.DriverManager; import java.sql.ResultSet; import java.s ...

  3. Android客户端与服务端交互之登陆示例

    Android客户端与服务端交互之登陆示例 今天了解了一下android客户端与服务端是怎样交互的,发现其实跟web有点类似吧,然后网上找了大神的登陆示例,是基于IntentService的 1.后台 ...

  4. jQuery Ajax： $.post请求示例

    jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...

  5. MySQL 登陆

    #==========================登陆mysql ============================================ # 登陆用户名:-u,登陆IP: -h, ...

  6. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  7. PHP MYSQL登陆和模糊查询

    PHP MYSQL登陆和模糊查询   PHP版本 5.5.12    MYSQL版本 5.6.17  Apache 2.4.9 用的wampserver 一.PHPMYSQL实现登陆:  一共含有两个 ...

  8. (转)MySQL登陆后提示符的修改

    MySQL登陆后提示符的修改 方法一:mysql命令行修改方式 mysql>prompt \u@night \r:\m:\s-> PROMPT set to '\u@night \r:\m ...

  9. MySql登陆密码忘记了 怎么办？

    MySql登陆密码忘记了 怎么办?root密码:连root密码忘记没用root进修改mysql数据库user表咯 root密码: 方法一:MySQL提供跳访问控制命令行参数通命令行命令启MySQL服务 ...

随机推荐

  1. sublime简要笔记

    选中单词 [1]选中当前单词 ctrl+d [2]跳过当前单词 ctrl+k ctrl+d [3]选中相同的所有单词 alt+f3 [4]多行游标 按住shift,然后按住鼠标右键向下拖动 行操作 [ ...

  2. Cocos2d-x 3.2学习笔记（三）学习绘图API

    关于cocos2d-x 3.2 版本的绘图方法有两种 1.使用DrawNode类绘制自定义图形. 2.继承Layer类重写draw()方法. 以上两种方法都可以绘制自定义图形,根据自己的需要选择合适的 ...

  3. 网络通信之Socket与LocalSocket的比较

    Socket与LocalSocket都可以实现网络通信,两个有什么区别呢? LocalSocket其通信方式与Socket差不多,只是LocalSocket没有跨越网络边界. 于是,思考到一个问题:a ...

  4. Spark入门实战系列--3.Spark编程模型（下）--IDEA搭建及实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 . 安装IntelliJ IDEA IDEA 全称 IntelliJ IDEA,是java语 ...

  5. CSS命名

    CSS命名规范 CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:n ...

  6. HTML5 Dashboard – 那些让你激动的 Web 技术

    HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...

  7. resin4的初次配置与使用

    之前用的resin3,结果发布新项目老师文件冲突,我也找不到是哪里有问题,于是尝试使用resin4. 首先从官网下载最新resin4. 然后放到opt下,tar -zvxf 解压. 然后修改conf/ ...

  8. [C/C++]函数指针和函数分发表

    // console.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using nam ...

  9. C#指定时间和当前时间的相差的月份、天数

    DateTime 类型有时间的 年月日时分秒等属性,但是获取两个DateTime的 相差月份,就需要自己写了: public static int GetSubMonth(DateTime speci ...

  10. Pig + Ansj 统计中文文本词频

    最近特别喜欢用Pig,拥有能满足大部分需求的内置函数(built-in functions),支持自定义函数(user defined functions, UDF),能load 纯文本.avro等格 ...