利用ajax可以做到页面无刷新登陆。

运行效果

目录结构

  1. site/
  2.     css/
  3.     images/
  4.     js/

site/css/bootstrap.css(bootstrap样式表)

site/js/bootstrap.js(bootstrap脚本)

site/js/jquery-2.1.0.js(jQuery)

site/images/ajax-loader.gif 

site/index.php

  1. <?php
  2.   session_start();
  3. ?>
  4. <!doctype html>
  5. <html lang="zh">
  6. <head>
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <title>ajax,php登陆</title>
  10. <!--bootstrap样式表-->
  11. <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  12. <link href="css/main.css" rel="stylesheet" media="screen">
  13. </head>
  14. <body>
  15. <div class="container">
  16. <?php
  17. if(!isset($_SESSION['username'])){
  18.     echo '
  19.     <form method="post" class="form-signin">
  20.         <h2 class="form-signin-heading">登陆</h2>
  21.         <input type="text" placeholder="用户名" class="form-control"  id="username" />
  22.         <input type="password" placeholder="密码" class="form-control"   id="password" />
  23.         <button id="submit" type="submit" class="btn btn-lg btn-primary btn-block">登陆</button>
  24.         <div id="message"></div>
  25.     </form>
  26.     ';
  27. } else {
  28.     echo '
  29.     <div class="form-signin">
  30.         <div class="alert alert-success">登陆<strong>成功</strong>。</div>
  31.         <a href="logout.php" class="btn btn-default btn-lg btn-block">退出登陆</a>
  32.     </div>
  33.     ';
  34. }
  35. ?>
  36. </div>
  37. </body>
  38. <!--jQuery-->
  39. <script src="js/jquery-2.1.0.js"></script>
  40. <!--booststrap库，一些方便的组件-->
  41. <script src="js/bootstrap.js"></script>
  42. <!--AJAX登陆脚本-->
  43. <script src="js/login.js"></script>
  44. </html>

site/css/main.css

  1. body {
  2.   padding-top: 40px;
  3.   padding-bottom: 40px;
  4.   background-color: #eee;
  5. }
  6.  
  7. .form-signin {
  8.   max-width: 330px;
  9.   padding: 15px;
  10.   margin:  auto;
  11. }
  12. .form-signin .form-signin-heading,
  13. .form-signin .checkbox {
  14.   margin-bottom: 10px;
  15. }
  16. .form-signin .checkbox {
  17.   font-weight: normal;
  18. }
  19. .form-signin .form-control {
  20.   position: relative;
  21.   font-size: 16px;
  22.   height: auto;
  23.   padding: 10px;
  24.   -webkit-box-sizing: border-box;
  25.      -moz-box-sizing: border-box;
  26.           box-sizing: border-box;
  27. }
  28. .form-signin .form-control:focus {
  29.   z-index: ;
  30. }
  31. .form-signin input[type="text"] {
  32.   margin-bottom: -1px;
  33.   border-bottom-left-radius: ;
  34.   border-bottom-right-radius: ;
  35. }
  36. .form-signin input[type="password"] {
  37.   margin-bottom: 10px;
  38.   border-top-left-radius: ;
  39.   border-top-right-radius: ;
  40. }
  41. .form-signin .btn {
  42.   margin-bottom: 10px;
  43. }

site/js/login.js

  1. $('#submit').click(function(e){
  2.     var username = $('#username').val();
  3.     var password = $('#password').val();
  4.     $.ajax({
  5.         type:"POST",
  6.         url: "checklogin.php",
  7.         data: "myusername="+username+"&mypassword="+password,
  8.         success: function(html){
  9.              if(html=='true') {
  10.                 window.location="index.php";
  11.               }
  12.               else {
  13.                 $("#message").html(html);
  14.               }
  15.         },
  16.         beforeSend:function()
  17.         {
  18.           $("#message").html("<p class='text-center'><img src='images/ajax-loader.gif'></p>")
  19.         }
  20.     })
  21.     return false;
  22. })

site/checklogin.php

  1. <?php
  2.  
  3.     // 会话开始
  4.     session_start();
  5.     include_once 'config.php';
  6.     // 连接数据库
  7.       $mysqli = mysqli_connect($host, $username, $password, $db_name) or die("数据库链接失败");
  8.  
  9.     // 获取用户名密码
  10.     $myusername = $_POST['myusername'];
  11.     $mypassword = $_POST['mypassword']; 
  12.  
  13.     // 防MySQL注入
  14.     $myusername = mysqli_real_escape_string($mysqli,$myusername);
  15.     $mypassword = mysqli_real_escape_string($mysqli,$mypassword);
  16.     $sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";
  17.     $result= mysqli_query( $mysqli,$sql);
  18.  
  19.     //  Mysql_num_row 获取结果数
  20.     $count=mysqli_num_rows($result);
  21.  
  22.     // If result matched $myusername and $mypassword, table row must be 1 row
  23.     if($count==1){
  24.  
  25.         // 打印 "true",并且将账号密码注册到session
  26.         echo "true";
  27.         $_SESSION['username'] = 'myusername';
  28.         $_SESSION['password'] = 'mypassword';
  29.  
  30.     }
  31.     else {
  32.         // 返回错误信息，&times;为X号
  33.         echo "<div class=\"alert alert-danger alert-dismissable\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>账号密码错误</div>";
  34.     }
  35. ?>

site/logout.php

  1. <?php
  2.     // 销毁session
  3.     session_start();
  4.     session_destroy();
  5.     header("location:index.php");
  6. ?>

site/config.php

  1. <?php
  2.     $host="localhost"; // Host
  3.     $username="root"; // Mysql用户名
  4.     $password="12345"; // Mysql密码
  5.     $db_name="test"; // 数据库名
  6.     $tbl_name="members"; // 表名
  7. ?>

php,ajax登陆退出的更多相关文章

  1. iframe 的使用和登陆退出的实现——整个页面跳转

    iframe中如果只是页面跳转的话,我们依然只是部分的加载的了,为了实现整个页面的所有内容跳转,下面提供了整个页面跳转的方法. iframe例子 1.总的iframe页面(访问就访问这个)  all. ...

  2. 基于ThinkPHP3.23的简单ajax登陆案例

    本文将给小伙伴们做一个基于ThinkPHP3.2.的简单ajax登陆demo.闲话不多说.直接进入正文吧. 可能有些小伙伴认为TP自带的跳转页面挺好,但是站在网站安全的角度来说,我们不应该让会员看到任 ...

  3. laravel前后端分离的用户登陆 退出 中间件的接口与session的使用

    在项目开发的过程中,需要有用户的登陆 退出 还有校验用户是否登陆的中间件; 基本思路: 登陆: 前端请求接口的参数校验 用户名 密码规则的校验 用户名密码是否正确的校验; 如果上面的校验都通过的了,把 ...

  4. Ajax登陆，使用Spring Security缓存跳转到登陆前的链接

    Spring Security缓存的应用之登陆后跳转到登录前源地址 什么意思? 用户访问网站,打开了一个链接:(origin url)起源链接 请求发送给服务器,服务器判断用户请求了受保护的资源. 由 ...

  5. Spring Security 使用Ajax登陆无法跳转页面解决方法

    使用Security的朋友都知道,使用Security后,不再需要我们自己过多的(还需要写少量代码)写登陆的逻辑,只需要自己在html的登陆表单上面定义好输入框name为:username和passw ...

  6. Yii2 前后台登陆退出分离、登陆验证

    这里用的yii2高级模板, 基本模板的配置文件在一个文件里,方法基本没什么区别, 1.用户表要有两个用户表, 当然一个也行,分开是省得麻烦,既然是分离了就彻底分开, 前台表user,后台表user_b ...

  7. netMVC 搭建Ucenter 同步登陆退出discuz

    先看一下效果

  8. 用户登陆,退出等基本Action

    用户登陆页面user_login.jsp对应action为login.do: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  9. IE浏览器下使用AJAX登陆接口请求缓存与登陆不了的问题解决

    问题: 在IE浏览器下面,登陆的时候老是登陆不上,但是打开控制台的时候再登陆却能登陆上. 分析: 通过抓包,发现,在不打开控制台的时候,少了一个接口的请求,却返回了改接口的返回信息,但是返回信息并不是 ...

随机推荐

  1. MongoDB 分片操作

    添加分片 use admin //添加分片节点,每个分片都是一个副本集[allowLocal:true仅仅开发时才将分片配置到本地,生产时不能这样] db.runCommand({addshard:& ...

  2. Linux,Unix各种版本的操作系统在线安装软件命令

    摘自:http://blog.csdn.net/zjg555543/article/details/8278266 linux和unix,各个版本的操作系统都有自己的软件安装方式,最方便的莫过于在线安 ...

  3. C#中的反射原理及应用(转)

    反射的概述 反射的定义:审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等, ...

  4. About Health Monitor Checks

    About Health Monitor Checks Health Monitor checks (also known as checkers, health checks, or checks) ...

  5. HTML及CSS常用颜色英文词汇

    黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0 #808080 #F ...

  6. C# @字符用法

    1.用 @ 符号加在字符串前面表示其中的转义字符“不”被处理. 如果我们写一个文件的路径,例如"D:/文本文件"路径下的text.txt文件,不加@符号的话写法如下: string ...

  7. 普通用户登录Oracle DB Control

    使用 sys 或者 system 用户登录 Oracle DB Control 是没有问题的. 但是,如果是普通的用户需要登录Oracle DB Control,建表或者视图之类的, 则需要授权 SE ...

  8. 几个Python oj的网站

    http://www.rqnoj.cn/ http://www.pythontip.com/

  9. There is no satiety in study

    好不容易考上了硕士.这个时候,才终于明白什么叫做学无止境.用了1周linux,发现需要学习的东西太多了.life is too short to learn c plus plus 果然如此.不过我们 ...

  10. java中遍历map对象的多种方法

    在Java中如何遍历Map对象   How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有ma ...