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

运行效果

目录结构

site/

    css/

    images/

    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

<?php

  session_start();

?>

<!doctype html>

<html lang="zh">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ajax,php登陆</title>

<!--bootstrap样式表-->

<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<link href="css/main.css" rel="stylesheet" media="screen">

</head>

<body>

<div class="container">

<?php

if(!isset($_SESSION['username'])){

    echo '

    <form method="post" class="form-signin">

        <h2 class="form-signin-heading">登陆</h2>

        <input type="text" placeholder="用户名" class="form-control"  id="username" />

        <input type="password" placeholder="密码" class="form-control"   id="password" />

        <button id="submit" type="submit" class="btn btn-lg btn-primary btn-block">登陆</button>

        <div id="message"></div>

    </form>

    ';

} else {

    echo '

    <div class="form-signin">

        <div class="alert alert-success">登陆<strong>成功</strong>。</div>

        <a href="logout.php" class="btn btn-default btn-lg btn-block">退出登陆</a>

    </div>

    ';

}

?>

</div>

</body>

<!--jQuery-->

<script src="js/jquery-2.1.0.js"></script>

<!--booststrap库，一些方便的组件-->

<script src="js/bootstrap.js"></script>

<!--AJAX登陆脚本-->

<script src="js/login.js"></script>

</html>

site/css/main.css

body {

  padding-top: 40px;

  padding-bottom: 40px;

  background-color: #eee;

}

.form-signin {

  max-width: 330px;

  padding: 15px;

  margin:  auto;

}

.form-signin .form-signin-heading,

.form-signin .checkbox {

  margin-bottom: 10px;

}

.form-signin .checkbox {

  font-weight: normal;

}

.form-signin .form-control {

  position: relative;

  font-size: 16px;

  height: auto;

  padding: 10px;

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

.form-signin .form-control:focus {

  z-index: ;

}

.form-signin input[type="text"] {

  margin-bottom: -1px;

  border-bottom-left-radius: ;

  border-bottom-right-radius: ;

}

.form-signin input[type="password"] {

  margin-bottom: 10px;

  border-top-left-radius: ;

  border-top-right-radius: ;

}

.form-signin .btn {

  margin-bottom: 10px;

}

site/js/login.js

$('#submit').click(function(e){

    var username = $('#username').val();

    var password = $('#password').val();

    $.ajax({

        type:"POST",

        url: "checklogin.php",

        data: "myusername="+username+"&mypassword="+password,

        success: function(html){

             if(html=='true') {

                window.location="index.php";

              }

              else {

                $("#message").html(html);

              }

        },

        beforeSend:function()

        {

          $("#message").html("<p class='text-center'><img src='images/ajax-loader.gif'></p>")

        }

    })

    return false;

})

site/checklogin.php

<?php

    // 会话开始

    session_start();

    include_once 'config.php';

    // 连接数据库

      $mysqli = mysqli_connect($host, $username, $password, $db_name) or die("数据库链接失败");

    // 获取用户名密码

    $myusername = $_POST['myusername'];

    $mypassword = $_POST['mypassword']; 

    // 防MySQL注入

    $myusername = mysqli_real_escape_string($mysqli,$myusername);

    $mypassword = mysqli_real_escape_string($mysqli,$mypassword);

    $sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";

    $result= mysqli_query( $mysqli,$sql);

    //  Mysql_num_row 获取结果数

    $count=mysqli_num_rows($result);

    // If result matched $myusername and $mypassword, table row must be 1 row

    if($count==1){

        // 打印 "true",并且将账号密码注册到session

        echo "true";

        $_SESSION['username'] = 'myusername';

        $_SESSION['password'] = 'mypassword';

    }

    else {

        // 返回错误信息，&times;为X号

        echo "<div class=\"alert alert-danger alert-dismissable\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>账号密码错误</div>";

    }

?>

site/logout.php

<?php

    // 销毁session

    session_start();

    session_destroy();

    header("location:index.php");

?>

site/config.php

<?php

    $host="localhost"; // Host

    $username="root"; // Mysql用户名

    $password="12345"; // Mysql密码

    $db_name="test"; // 数据库名

    $tbl_name="members"; // 表名

?>

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. linux之SQL语句简明教程---COUNT

    在上一页有提到,COUNT 是函数之一.由于它的使用广泛,我们在这里特别提出来讨论.基本上,COUNT 让我们能够数出在表格中有多少笔资料被选出来.它的语法是: SELECT COUNT(" ...

  2. ES6笔记① var 和 let的区别

    let 和 var的区别    答:不同点在于作用域 1.(全局下)首先  let关键字声明的变量是这样写会导致错误. let声明的变量类似于”本地变量“,函数内如何不重新声明,还是会被改变 var ...

  3. webpack 多入口配置

    同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...

  4. 嵌入式平台组件白盒测试gcov、lcov和genhtml 使用指导

    在嵌入式平台上使用了gtest白盒测试工具,覆盖了被测函数,但是不知道自己测试的效果如何,测试行覆盖率.函数覆盖率,分支覆盖率的数据. 便开始研究gcov这个代码覆盖率工具能否使用,来检查白盒测试的效 ...

  5. Datagridview控件实现分页功能

    可以进行sql语句进行设置:      1.先新建一个窗体,一个DataGridView控件.两个label控件.两个Button控件   2.代码如下: using System; using Sy ...

  6. 查看Linux下网卡状态或 是否连接

    分类: 1) 通过mii-tool指令       [root@localhost root]# mii-tool        eth0: negotiated 100baseTx-FD, link ...

  7. Linux系统重启network服务失败

    问题描述 使用KVM通过修改配置文件配置好网卡IP,使用命令行service network restart 重启网络服务失败. 如图: 使用图形化管理工具配置IP,在系统界面右上角可以看到网卡状态为 ...

  8. 好的组件，无须太复杂 – KISSY Slide 组件简介

    KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...

  9. js 概念（构造函数）

    所有关于类.对象的语言里面,都有构造函数的概念,其实构造函数,就是在创建这个对象或者类的实例时候自动调用的函数,一般的语言都是new创建,那么new的参数就传递给构造函数.

  10. 在Linux下sqlplus 登录时显示SID 和用户名

    一般显示为: SQL> show user USER 为 "SYS" SQL> 在 $ORACLE_HOME/sqlplus/admin目录下 编辑glogin.sql ...