ajax+tp5 详情页跳转/实现登录--注册

 

 需求：点击资料下载后     跳转到登录页 登录成功 下载资料，   有账号即可登录   无账号即需注册！

   <form action="" method="POST" role="form"  class="login-form" id="form">
        <legend>用户登录</legend>

        <div class="form-group zh">
            <input type="text" class="focus_input" id="username" value="" name="username" autocomplete="off" placeholder="请输入账号">
        </div>
        <div class="form-group mm">
            <input type="password"  id="password" value="" name="password" autocomplete="off" class="focus_input"  placeholder="请输入密码">
        </div>
        <div class="form-group yzm">
            <input type="text" class="focus_input" name="verify" id="verify" placeholder="验证码"  autocomplete="off" >

            <div>
                <img class="verifyimg reloadverify" alt="点击切换" src="/Home/Download/verify.html" />  

            </div>
        </div>
        <div id="tipscont" style="height:25px; color:red;"></div>
        <button type="button" class="btn btn-primary send">登录</button>
    </form>

后台详情页接路径：

      $url = $_SERVER['REQUEST_URI'];
        session_start();
        $_SESSION['url'] = $url;

ajax前台处理：

必须引入：<script src="/Public/Home/js/jquery-3.6.0.min.js"></script>

$(".send").click(function () {
        if (!$('#username').val()) {
            $('#tipscont').html('请输入姓名')
            $('#username').focus();
            return false
        }
        if (!$('#password').val()) {
            $('#tipscont').html('请输入密码')
            $('#password').focus();
            return false
        }
        if (!$('#verify').val()) {
            $('#tipscont').html('请输入验证码')
            $('#verify').focus();
            return false
        }
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '/download/login',
            data: $('#form').serialize(),
            success: function (data) {
                if (data.code == 1) {
                    alert("登录成功");
                    window.location.href= data.url;
                } else {
                    $('.verifyimg').click();
                    $('#tipscont').html(data.msg)
                }
            }
        })
    })

      $(function () {
            $('.focus_input').blur(function () {
                $(this).parent().removeAttr('style');
            })


            $('.focus_input').focus(function () {




                $(this).css('border', '0');




                $(this).parent().css('borderBottom', '1px solid #30b097');




            })





            //初始化选中用户名输入框




            $("#itemBox").find("input[name=username]").focus();




            //刷新验证码




            var verifyimg = $(".verifyimg").attr("src");




            $(".reloadverify").click(function ()




            {




                if (verifyimg.indexOf('?') > 0) {




                    $(".verifyimg").attr("src", verifyimg + '&random=' + Math.random());




                } else {




                    $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());




                }




            });




            $(".announ dl dd").bind('click', function ()




            {




                var id = $(this).attr("id");






                $.colorbox({href: "{:U('AnnounInFo')}?id=" + id + "&Rand=" + Math.random(), iframe: true, title: "系统公告", width: 560, height: 420, scrolling: false, opacity: 0.5});






            })




            //placeholder兼容性




            //如果支持 




            function isPlaceholer() {




                var input = document.createElement('input');




                return "placeholder" in input;




            }




            //如果不支持




            if (!isPlaceholer()) {




                $(".placeholder_copy").css({
                    display: 'block'




                })




                $("#itemBox input").keydown(function () {




                    $(this).parents(".item").next(".placeholder_copy").css({
                        display: 'none'




                    })




                })




                $("#itemBox input").blur(function () {
                    if ($(this).val() == "")
                    {
                        $(this).parents(".item").next(".placeholder_copy").css({
                            display: 'block'
                        })
                    }
                })
            }
            $(".placeholder_copy").click(function () {




                $(this).hide();




                $(this).prev('div').find('input').focus();
            })
        });

后台处理：

 //登录
    public function login() {
        if (IS_POST) {
            $username = $_POST['username'];
            $password = $_POST['password'];
            $verify = $_POST['verify'];
            if (!$username) {
                $this->jsonEncode(array('msg' => '账号不能为空', 'code' => '-1'));
            }

            if (!$password) {
                $this->jsonEncode(array('msg' => '密码不能为空', 'code' => '-1'));
            }

            /* 检测验证码 TODO: */
            if (!$this->check_verify($verify)) {
                $this->jsonEncode(array('msg' => '验证码输入错误', 'code' => '-1'));
            }

            $user = M("Member")->where("username='{$username}'")->find();
            if (!$user['uid']) {
                $this->jsonEncode(array('msg' => '此账号不存在！', 'code' => '-1'));
            }
            $res = M('Member')->where("password='" . $this->frontthinkUcenterMd5($password, C(DATA_AUTH_KEY)) . "' and uid=" . $user['uid'])->find();
            if (!$res['uid']) {
                $this->jsonEncode(array('msg' => '密码错误！', 'code' => '-1'));
            }

            $_SESSION['username'] = $username;
            $_SESSION['yh_uid'] = $res['uid'];
            $this->autoLogin($user);
            $userinfo = array('username' => $username, 'password' => $password, 'url' => $urldata);
            $this->jsonEncode(array('msg' => '登录成功', 'code' => '1', 'userinfo' => json_encode($userinfo), 'url' => $_SESSION['url']));
        }
        $this->display();
    }

    public function jsonEncode($arr) {

        echo json_encode($arr);

        exit;

    }

    public function frontthinkUcenterMd5($str, $key = 'ThinkUCenter') {

        return '' === $str ? '' : md5(sha1($str) . $key);

    }

 

前台资料下载页面处理：

                            <a href="login.html">
                              <if condition=" $info.file_url ">
                                <a href="/download/downloadFile?fileurl={$info.file_url}">
                                        <div class="xiazai">
                                    <p>资料下载</p>
                                    <i class="iconfont icon-ziliaoxiazai"></i>
                                </div>
                                </a>
                             </if>