php,ajax登陆退出
利用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 {
// 返回错误信息，×为X号
echo "<div class=\"alert alert-danger alert-dismissable\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</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登陆退出的更多相关文章
- iframe 的使用和登陆退出的实现——整个页面跳转
iframe中如果只是页面跳转的话,我们依然只是部分的加载的了,为了实现整个页面的所有内容跳转,下面提供了整个页面跳转的方法. iframe例子 1.总的iframe页面(访问就访问这个) all. ...
- 基于ThinkPHP3.23的简单ajax登陆案例
本文将给小伙伴们做一个基于ThinkPHP3.2.的简单ajax登陆demo.闲话不多说.直接进入正文吧. 可能有些小伙伴认为TP自带的跳转页面挺好,但是站在网站安全的角度来说,我们不应该让会员看到任 ...
- laravel前后端分离的用户登陆 退出 中间件的接口与session的使用
在项目开发的过程中,需要有用户的登陆 退出 还有校验用户是否登陆的中间件; 基本思路: 登陆: 前端请求接口的参数校验 用户名 密码规则的校验 用户名密码是否正确的校验; 如果上面的校验都通过的了,把 ...
- Ajax登陆，使用Spring Security缓存跳转到登陆前的链接
Spring Security缓存的应用之登陆后跳转到登录前源地址 什么意思? 用户访问网站,打开了一个链接:(origin url)起源链接 请求发送给服务器,服务器判断用户请求了受保护的资源. 由 ...
- Spring Security 使用Ajax登陆无法跳转页面解决方法
使用Security的朋友都知道,使用Security后,不再需要我们自己过多的(还需要写少量代码)写登陆的逻辑,只需要自己在html的登陆表单上面定义好输入框name为:username和passw ...
- Yii2 前后台登陆退出分离、登陆验证
这里用的yii2高级模板, 基本模板的配置文件在一个文件里,方法基本没什么区别, 1.用户表要有两个用户表, 当然一个也行,分开是省得麻烦,既然是分离了就彻底分开, 前台表user,后台表user_b ...
- netMVC 搭建Ucenter 同步登陆退出discuz
先看一下效果
- 用户登陆,退出等基本Action
用户登陆页面user_login.jsp对应action为login.do: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- IE浏览器下使用AJAX登陆接口请求缓存与登陆不了的问题解决
问题: 在IE浏览器下面,登陆的时候老是登陆不上,但是打开控制台的时候再登陆却能登陆上. 分析: 通过抓包,发现,在不打开控制台的时候,少了一个接口的请求,却返回了改接口的返回信息,但是返回信息并不是 ...
随机推荐
- linux之SQL语句简明教程---GROUP BY
我们现在回到函数上.记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是要算出每一间店 (Store_Name) 的营业额 (Sales),那怎么办呢?在这个情况下 ...
- node.js url模块
URL url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) url.format(urlObj) url.resolve(from, ...
- UVA 714 Copying Books
题意: 要抄N本书,编号为1,2,3...N, 每本书有1<=x<=10000000页, 把这些书分配给K个抄写员,要求分配给某个抄写员的那些书的编号必须是连续的.每个抄写员的速度是相同的 ...
- 2014.12.13 ASP.NET文件上传
一.文件上传:(一)上传到硬盘文件夹1.最简单的上传. [HTML代码] <asp:FileUpload ID="FileUpload1" runat="serve ...
- 【IOS学习基础】NSObject.h学习
一.<NSObject>协议和代理模式 1.在NSObject.h头文件中,我们可以看到 // NSObject类是默认遵守<NSObject>协议的 @interface N ...
- ArrayList和LinkedList区别
一般大家都知道ArrayList和LinkedList的大致区别: 1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问 ...
- oracle11g用户名密码不区分大小写
oracle 11g 以前的版本的用户名和密码是不区分大小写的; oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_log ...
- Normalize.css 介绍与源码解读
开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目 ...
- Android_Dialog cancle 和dismiss 区别
AlertDialog使用很方便,但是有一个问题就是:dismiss方法和cancel方法到底有什么不同? AlertDialog继承与Dialog,现在各位看看结构图: 然后在Dialog类中找到了 ...
- SQL Server2012 创建定时作业——图文并茂，教你轻松快速创建
SQL Server2012 如何创建定时作业?有兴趣的可以来看下,图文并茂哦! 1.首先我们打开SQL Server代理,里面选择作业 2.右键作业,选择新建作业 3.填写一些相应的内容,名称和说明 ...