利用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. Make a travel blog by Blogabond the theme of wordpress

    We can record our place which we have ever went.If you want to know any more you can visit :http://w ...

  2. 【LeetCode练习题】Longest Valid Parentheses

    Longest Valid Parentheses Given a string containing just the characters '(' and ')', find the length ...

  3. Linux之旅(1): diff, patch和quilt （下）

    Linux之旅(1): diff, patch和quilt (下) 2 quilt 我们自己的项目能够用cvs或svn管理所有代码.但有时我们要使用其它开发人员维护的项目.我们须要改动一些文件,但又不 ...

  4. 第三章：挖掘SimpleSection.o

    1.查看.o目标文件用objdump 命令, 参数“-h"就是把ELF文件的各个段的基本信息打印出来.也可以使用-X打印更多的信息. 段的属性,Size是段的长度,FIle off 是段开始 ...

  5. 如何一步步把网站Retina优化

    随着高清屏幕.高分辨率屏幕越来越流行,例如MacBook Retina机型.iPad Air系列,这些新生机器有着很高的PPI,对网页的清晰度要求很高,所以越来越多的站长都不得不面临一个问题,那就是把 ...

  6. git创建分支

    1.创建本地分支名称为dev的本地分支 git branch dev 2.将本地分支添加到远程分支 git push origin dev 3.查看创建的本地分支, 带有*符号的分支,代表当前所在分支 ...

  7. jquery选择器从认识到使用初级篇

    1.   .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input cl ...

  8. PHP自学4——通过函数将数组数据输出到html的Table标签中（使用函数的例子）

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

  9. Android Service 系统服务

    android sdk 提供很多公用的服务,也就是系统服务,开发者可以通过Activity类的getSystemService方法获取指定的服务.系统服务包含音频服务.视频服务窗口服务等.本篇主要讲T ...

  10. HTML——JavaScript简介

    一.简介: JavaScript是个脚本语言,需要有宿主文件,他的宿主文件是HTML文件. JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. JavaSc ...