ThinkPHP+JQuery实现ajax无刷新登录验证（详解+相关问题）

最新推荐文章于 2021-08-06 18:27:19 发布

chitaixiao7984

最新推荐文章于 2021-08-06 18:27:19 发布

阅读量236

点赞数

文章标签： php json javascript ViewUI

原文链接：https://my.oschina.net/postbird/blog/669704

版权

ThinkPHP+JQuery实现ajax无刷新登录验证

摘要：

使用原生javascript进行ajax实现无刷新更改页面内容的复杂性尽人皆知，而jquery对ajax传递进行了封装和优化，因此通过jquery进行ajax的参数传递无疑是很好的选择。本文主要内容为thinkphp结合jquery实现登录验证的无刷新，并可以应用到其他方面。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>AjaxTest</title>
      <script>
         var appUrl="__APP__";
         /*
            通过定义APP，获取APP地址在JS中使用！
            常量的定义必须在indexAjax.js前面，不然失效！
         */
     </script>
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
     <script src="__PUBLIC__/indexAjax.js"></script>
 </head>
 <body>
     <form >
          <label for="name">Name:</label>
          <input type="text" name="name" value="" id="name">
          <label for="password">Password:</label>
          <input type="password" name="password" value="" id="password">
          <input type="button" id="submitButton" value="登录">
     </form>
     <hr>     
         <h1 id="loginSuccess">Login  Success!!</h1>
         <h1 id="loginError">Login Error!!</h1>
         <!--初始隐藏-->
 </body>
 </html> <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>AjaxTest</title>
      <script>
         var appUrl="__APP__";
         /*
            通过定义APP，获取APP地址在JS中使用！
            常量的定义必须在indexAjax.js前面，不然失效！
         */
     </script>
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
     <script src="__PUBLIC__/indexAjax.js"></script>
 </head>
 <body>
     <form >
          <label for="name">Name:</label>
          <input type="text" name="name" value="" id="name">
          <label for="password">Password:</label>
          <input type="password" name="password" value="" id="password">
          <input type="button" id="submitButton" value="登录">
     </form>
     <hr>     
         <h1 id="loginSuccess">Login  Success!!</h1>
         <h1 id="loginError">Login Error!!</h1>
         <!--初始隐藏-->
 </body>
 </html>

indexAjax.js

jQuery(document).ready(function() {

            $('#loginSuccess').hide();

            $('#loginError').hide();

            var postUrl=appUrl+"/Home/Index/test";

            //通过前面定义的变量获取地址

            $('#submitButton').click(function(){

            // $.post('d1',{json:数据},{回调函数});

            //post可以传递json数据，如下：

                $.post(postUrl,{

                    'name':$("#name").val(),

                    'password':$("#password").val()

                        },function(data){

                          /*data是返回的值*/

                             if(data.flag==1){

                              //返回的是json数据，详细看php代码

                               $('#loginSuccess').fadeIn();

                               $('#loginError').fadeOut();

                            }else{

                              $('#loginError').fadeIn();

                               $('#loginSuccess').fadeOut();
                               
                            }
                  });
            });
         });

indexController.class.php

<?php
namespace Home\Controller;
use Think\Controller;

class IndexController extends Controller {

    public function index(){

        $this->display('index');

    }

    public function test(){

        $name=$_POST['name'];

        $password=$_POST['password'];

        $arr['flag']=0;

        if($name=='postbird'){

            if($password=='123456'){

                $arr['flag']=1;

                //进行数据封装

                $this->ajaxReturn($arr,json);

            }else{

               $this->ajaxReturn($arr,json);

                //返回json数据

            }

        }else{

               $this->ajaxReturn($arr,json);

        }

    }

}

2）、1.7版本后jQuery废除了live事件，而是采用了统一的api方式，这样对程序开发人员来说是个好消息，不用记那么多api了，统一用on的方式调用

<pre name="code" class="javascript">$(document).on("click", selector, function(){
   			 // 事件逻辑
		})

新版本推荐用on的方式，document尽量是要绑定事件的最小包含元素，比如父元素，这样性能会更好，selector则是要绑定元素的选择器。

4、ThinkPHP路径：

js中需要进行URL的获取，否则ajax参数传递地址无法获得、

ThinkPHP推荐使用模板替换，一种方案是：

在 <script src="__PUBLIC__/indexAjax.js"></script>之前定义变量 APPURL

这样在js中就可以使用 APPURL+”/Home/User/Check“; 作为处理地址。

以上为关于ThinkPHP进行ajax无刷新验证的相关总结。

有任何疑问或指正，请在下方评论。

谢谢。

postbird

http://www.ptbird.cn

There I am , in the world more exciting!

转载于:https://my.oschina.net/postbird/blog/669704

chitaixiao7984

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThinkPHP+JQuery实现ajax无刷新登录验证（详解+相关问题）

ThinkPHP+JQuery实现ajax无刷新登录验证摘要：使用原生javascript进行ajax实现无刷新更改页面内容的复杂性尽人皆知，而jquery对ajax传递进行了封装和优化，因此通过jquery进行ajax的参数传递无疑是很好的选择。本文主要内容为thinkp...
复制链接

扫一扫