thinkphp 异步=登陆+注册+注销 jquery+ajax+thinkphp
2015-09-10 09:01
686 查看
用到3个页面 注册、登陆、个人中心
别忘了加载jQuery框架
1、注册界面 Register / index.html
2、注册控制器 RegisterController.class.php
3、注册模型页 RegisterModel.class.php
4、登陆界面 Login / index.html
5、登陆控制器 LoginController
6、个人中心界面 Personal / index.html
7、个人中心控制器 Personal / index.html
8、登陆css文件 public / Home / css / login.css
9、注册css文件 public / Home / css / register.css
++++++++数据表结构 user_info表
1、注册界面 Register / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="__CSS__/personal.css">
</head>
<body>
<div class="personal">
<p>个人中心页</p>
<!--<p class="logout">注销</p>-->
<p>欢迎你,{$username}</p>
<p><button id="logout" onclick="logout()">注销</button></p>
<input type="hidden" value="{:U('Personal/logout')}" name="logout" />
</div>
</body>
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script>
function logout(){
var url = $('input[name="logout"]').val();
$.ajax({
url : url,
dataType : 'json',
success : function(res) {
if(res.status == 1){
alert(res.info);
window.location.href = res.url;
}else{
alert(res.info);
}
}
});
}
</script>
</html>
2、注册控制器 RegisterController.class.php
3、注册模型页 RegisterModel.class.php
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 下午12:23
*/
namespace Home\Model;
use Think\Model;
class UserInfoModel extends Model{
protected $_validate = array(
array('username','require','用户名不能为空'),
array('email', 'email', '邮箱格式不合法!'),
array('email','require','邮箱不能为空!'),
array('password','require','密码不能为空'),
);
}
4、登陆界面 Login / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="__CSS__/login.css">
</head>
<body>
<div class="login_page">
<div class="login">登录</div>
<div class="email">E-Mail<input class="emailIpt" name="email" type="text"></div>
<div class="password">密码<input class="passIpt" name="password" type="password"></div>
<div class="loginSub"><button class="submit" onclick="login()">登录</button></div>
<hr>
<div class="prompt">没有账号?</div>
<div class="loadLogin"><button class="loadLoginSub" onclick="register()">注册</button></div>
<input type="hidden" value="{:U('Register/index')}" name="register" />
<input type="hidden" value="{:U('Login/login')}" name="login" />
</div>
</body>
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script>
function login(){
var email = $('input[name="email"]').val();
var password = $('input[name="password"]').val();
var url = $('input[name="login"]').val();
$.ajax({
type : 'POST',
url : url,
data : {email:email,password:password},
dataType : 'json',
success : function(res) {
if(res.status == 1){
alert(res.info);
window.location.href = res.url;
}else{
alert(res.info);
}
}
});
}
function register(){
var register_url = $('input[name="register"]').val();
window.location.href = register_url;
}
</script>
</html>
5、登陆控制器 LoginController
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 上午10:27
*/
namespace Home\Controller;
use Think\Controller;
class LoginController extends Controller{
public function index(){
$this->show();
}
public function login(){
$UserInfo = M('UserInfo');
$data = I('post.');
$email = I('post.email');
$result = $UserInfo->field('id')->where($data)->find();
$id = $result['id'];
if($result){
session('email',$email);
session('id',$id);
$this->success('登陆成功',U('Personal/index'));
}else{
$this->error('登陆失败');
}
}
}
6、个人中心界面 Personal / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="__CSS__/personal.css">
</head>
<body>
<div class="personal">
<p>个人中心页</p>
<!--<p class="logout">注销</p>-->
<p>欢迎你,{$username}</p>
<p><button id="logout" onclick="logout()">注销</button></p>
<input type="hidden" value="{:U('Personal/logout')}" name="logout" />
</div>
</body>
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script>
function logout(){
var url = $('input[name="logout"]').val();
$.ajax({
url : url,
dataType : 'json',
success : function(res) {
if(res.status == 1){
alert(res.info);
window.location.href = res.url;
}else{
alert(res.info);
}
}
});
}
</script>
</html>
7、个人中心控制器 Personal / index.html
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 上午11:42
*/
namespace Home\Controller;
use Think\Controller;
class PersonalController extends Controller{
public function index(){
//通过session判断用户是否登陆过
if(session('?email') && session('email')!= null){
$UserInfo = M('UserInfo');
$data['email'] = session('email');
$result = $UserInfo->field('username')->where($data)->find();
$username = $result['username'];
$this->assign('username',$username);
$this->display();
}else{
}
}
//注销
public function logout(){
$result = session_destroy();
if($result){
$this->success('注销成功',U('Login/index'));
}else{
$this->error("注销失败");
}
}
}
8、登陆css文件 public / Home / css / login.css
/*div{text-align:center}*/
.login_page{
margin:auto;
height:450px;
width: 400px;
border: 1px solid #e1e1e8;
/*background: #e1e1e8;*/
}
.login{
text-align: center;
height: 40px;
width: 100%;
background:#e1e1e8;
}
.username{
/*float: left;*/
height: 20px;
width: 370px;
margin:10px auto;
/*border: 1px solid #e1e1e8;*/
}
.userIpt{
float: left;
height: 30px;
wid
b03d
th: 364px;
margin:10px auto;
/*margin: auto;*/
}
.email{
height: 20px;
width: 370px;
margin:40px auto;
/*border: 1px solid #e1e1e8;*/
}
.emailIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.password{
height: 20px;
width: 370px;
margin:65px auto;
/*border: 1px solid #e1e1e8;*/
}
.passIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.loginSub{
height: 40px;
width: 370px;
margin:10px auto ;
}
.submit{
background: cornflowerblue;
width: 50px;
height: 35px;
}
.prompt{
height: 30px;
width: 370px;
margin:10px auto ;
}
.prompt a{
text-decoration:none;
}
.loadLogin{
height: 30px;
width: 370px;
margin:10px auto;
}
.loadLoginSub{
background:#B0C3DF;
width: 370px;
height: 35px;
}
9、注册css文件 public / Home / css / register.css
/*div{text-align:center}*/
.register_page{
margin:auto;
height:450px;
width: 400px;
border: 1px solid #e1e1e8;
/*background: #e1e1e8;*/
}
.register{
text-align: center;
height: 40px;
width: 100%;
background:#e1e1e8;
}
.username{
/*float: left;*/
height: 20px;
width: 370px;
margin:10px auto;
/*border: 1px solid #e1e1e8;*/
}
.userIpt{
float: left;
height: 30px;
width: 364px;
margin:10px auto;
/*margin: auto;*/
}
.email{
height: 20px;
width: 370px;
margin:40px auto;
/*border: 1px solid #e1e1e8;*/
}
.emailIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.password{
height: 20px;
width: 370px;
margin:65px auto;
/*border: 1px solid #e1e1e8;*/
}
.passIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.regSub{
height: 40px;
width: 370px;
margin:10px auto ;
}
.submit{
background: cornflowerblue;
width: 50px;
height: 35px;
}
.prompt{
height: 30px;
width: 370px;
margin:10px auto ;
}
.prompt a{
text-decoration:none;
}
.loadLogin{
height: 30px;
width: 370px;
margin:10px auto;
}
.loadLoginSub{
background:#B0C3DF;
width: 370px;
height: 35px;
}
别忘了加载jQuery框架
1、注册界面 Register / index.html
2、注册控制器 RegisterController.class.php
3、注册模型页 RegisterModel.class.php
4、登陆界面 Login / index.html
5、登陆控制器 LoginController
6、个人中心界面 Personal / index.html
7、个人中心控制器 Personal / index.html
8、登陆css文件 public / Home / css / login.css
9、注册css文件 public / Home / css / register.css
++++++++数据表结构 user_info表
1、注册界面 Register / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="__CSS__/personal.css">
</head>
<body>
<div class="personal">
<p>个人中心页</p>
<!--<p class="logout">注销</p>-->
<p>欢迎你,{$username}</p>
<p><button id="logout" onclick="logout()">注销</button></p>
<input type="hidden" value="{:U('Personal/logout')}" name="logout" />
</div>
</body>
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script>
function logout(){
var url = $('input[name="logout"]').val();
$.ajax({
url : url,
dataType : 'json',
success : function(res) {
if(res.status == 1){
alert(res.info);
window.location.href = res.url;
}else{
alert(res.info);
}
}
});
}
</script>
</html>
2、注册控制器 RegisterController.class.php
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 上午10:28
*/
namespace Home\Controller;
use Think\Controller;
class RegisterController extends Controller{
public function index(){
$this->show();
}
public function ajax(){
$UserInfo = D('UserInfo');
$username = I('post.username');
$data = I('post.');
// 验证数据格式
if(!$UserInfo->create($data)){
// 获取错误信息
$row = $UserInfo->getError();
$this->error($row);
}else{
// 添加数据
$id = $UserInfo->add($data);
// 判断是否写入成功
if($id > 0){
// 注册成功
$this->success('注册成功！', U('Login/index'));
}else{
$this->error('注册失败！');
}
}
}
}
?>3、注册模型页 RegisterModel.class.php
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 下午12:23
*/
namespace Home\Model;
use Think\Model;
class UserInfoModel extends Model{
protected $_validate = array(
array('username','require','用户名不能为空'),
array('email', 'email', '邮箱格式不合法!'),
array('email','require','邮箱不能为空!'),
array('password','require','密码不能为空'),
);
}
4、登陆界面 Login / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="__CSS__/login.css">
</head>
<body>
<div class="login_page">
<div class="login">登录</div>
<div class="email">E-Mail<input class="emailIpt" name="email" type="text"></div>
<div class="password">密码<input class="passIpt" name="password" type="password"></div>
<div class="loginSub"><button class="submit" onclick="login()">登录</button></div>
<hr>
<div class="prompt">没有账号?</div>
<div class="loadLogin"><button class="loadLoginSub" onclick="register()">注册</button></div>
<input type="hidden" value="{:U('Register/index')}" name="register" />
<input type="hidden" value="{:U('Login/login')}" name="login" />
</div>
</body>
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script>
function login(){
var email = $('input[name="email"]').val();
var password = $('input[name="password"]').val();
var url = $('input[name="login"]').val();
$.ajax({
type : 'POST',
url : url,
data : {email:email,password:password},
dataType : 'json',
success : function(res) {
if(res.status == 1){
alert(res.info);
window.location.href = res.url;
}else{
alert(res.info);
}
}
});
}
function register(){
var register_url = $('input[name="register"]').val();
window.location.href = register_url;
}
</script>
</html>
5、登陆控制器 LoginController
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 上午10:27
*/
namespace Home\Controller;
use Think\Controller;
class LoginController extends Controller{
public function index(){
$this->show();
}
public function login(){
$UserInfo = M('UserInfo');
$data = I('post.');
$email = I('post.email');
$result = $UserInfo->field('id')->where($data)->find();
$id = $result['id'];
if($result){
session('email',$email);
session('id',$id);
$this->success('登陆成功',U('Personal/index'));
}else{
$this->error('登陆失败');
}
}
}
6、个人中心界面 Personal / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="__CSS__/personal.css">
</head>
<body>
<div class="personal">
<p>个人中心页</p>
<!--<p class="logout">注销</p>-->
<p>欢迎你,{$username}</p>
<p><button id="logout" onclick="logout()">注销</button></p>
<input type="hidden" value="{:U('Personal/logout')}" name="logout" />
</div>
</body>
<script src="__JS__/jquery-2.1.1.min.js"></script>
<script>
function logout(){
var url = $('input[name="logout"]').val();
$.ajax({
url : url,
dataType : 'json',
success : function(res) {
if(res.status == 1){
alert(res.info);
window.location.href = res.url;
}else{
alert(res.info);
}
}
});
}
</script>
</html>
7、个人中心控制器 Personal / index.html
<?php
/**
* Created by PhpStorm.
* User: outusi
* Date: 15/9/8
* Time: 上午11:42
*/
namespace Home\Controller;
use Think\Controller;
class PersonalController extends Controller{
public function index(){
//通过session判断用户是否登陆过
if(session('?email') && session('email')!= null){
$UserInfo = M('UserInfo');
$data['email'] = session('email');
$result = $UserInfo->field('username')->where($data)->find();
$username = $result['username'];
$this->assign('username',$username);
$this->display();
}else{
}
}
//注销
public function logout(){
$result = session_destroy();
if($result){
$this->success('注销成功',U('Login/index'));
}else{
$this->error("注销失败");
}
}
}
8、登陆css文件 public / Home / css / login.css
/*div{text-align:center}*/
.login_page{
margin:auto;
height:450px;
width: 400px;
border: 1px solid #e1e1e8;
/*background: #e1e1e8;*/
}
.login{
text-align: center;
height: 40px;
width: 100%;
background:#e1e1e8;
}
.username{
/*float: left;*/
height: 20px;
width: 370px;
margin:10px auto;
/*border: 1px solid #e1e1e8;*/
}
.userIpt{
float: left;
height: 30px;
wid
b03d
th: 364px;
margin:10px auto;
/*margin: auto;*/
}
.email{
height: 20px;
width: 370px;
margin:40px auto;
/*border: 1px solid #e1e1e8;*/
}
.emailIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.password{
height: 20px;
width: 370px;
margin:65px auto;
/*border: 1px solid #e1e1e8;*/
}
.passIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.loginSub{
height: 40px;
width: 370px;
margin:10px auto ;
}
.submit{
background: cornflowerblue;
width: 50px;
height: 35px;
}
.prompt{
height: 30px;
width: 370px;
margin:10px auto ;
}
.prompt a{
text-decoration:none;
}
.loadLogin{
height: 30px;
width: 370px;
margin:10px auto;
}
.loadLoginSub{
background:#B0C3DF;
width: 370px;
height: 35px;
}
9、注册css文件 public / Home / css / register.css
/*div{text-align:center}*/
.register_page{
margin:auto;
height:450px;
width: 400px;
border: 1px solid #e1e1e8;
/*background: #e1e1e8;*/
}
.register{
text-align: center;
height: 40px;
width: 100%;
background:#e1e1e8;
}
.username{
/*float: left;*/
height: 20px;
width: 370px;
margin:10px auto;
/*border: 1px solid #e1e1e8;*/
}
.userIpt{
float: left;
height: 30px;
width: 364px;
margin:10px auto;
/*margin: auto;*/
}
.email{
height: 20px;
width: 370px;
margin:40px auto;
/*border: 1px solid #e1e1e8;*/
}
.emailIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.password{
height: 20px;
width: 370px;
margin:65px auto;
/*border: 1px solid #e1e1e8;*/
}
.passIpt{
height: 30px;
width: 364px;
margin:10px auto ;
/*margin: auto;*/
}
.regSub{
height: 40px;
width: 370px;
margin:10px auto ;
}
.submit{
background: cornflowerblue;
width: 50px;
height: 35px;
}
.prompt{
height: 30px;
width: 370px;
margin:10px auto ;
}
.prompt a{
text-decoration:none;
}
.loadLogin{
height: 30px;
width: 370px;
margin:10px auto;
}
.loadLoginSub{
background:#B0C3DF;
width: 370px;
height: 35px;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个关于if else容易迷惑的问题
- JQuery1——基础（$对象，选择器，对象转换）
- PHP5.2.*防止Hash冲突拒绝服务攻击的Patch
- 深入理解PHP之匿名函数
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- JSP/PHP基于Ajax的分页功能实现
- 关于PHP通过PDO用中文条件查询MySQL的问题。
- jQuery Ajax 跨域调用
- 什么是设计模式
- 移动端的长按事件
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- HTML5中在客户端验证文件上传的大小
- PHP数据库长连接mysql_pconnect的细节
- kindeditor 批量上传 上传失败 thinkphp swfupload session
- Php Installing An Expansion
- Canvas 在高清屏下绘制图片变模糊的解决方法