thinkphp 异步=登陆+注册+注销 jquery+ajax+thinkphp

用到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" οnclick="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" οnclick="login()">登录</button></div>
    <hr>
    <div class="prompt">没有账号?</div>
    <div class="loadLogin"><button class="loadLoginSub" οnclick="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" οnclick="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;
    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;*/
}

.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;
}

版权声明：本文为scenewood原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/scenewood/article/details/48338139