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

来源：互联网发布：python 打印字体颜色编辑：程序博客网时间：2024/05/17 08:51

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

 <?phpnamespace 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!

1 0

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

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

摘要：

目录：

参数说明：
URL：必选参数，用于服务器地址
callback：函数，用于数据返回处理

参数说明：
URL：必选参数，用于服务器地址
data：可选，用于发送数据
callback：函数，用于数据返回处理

如果是取简单的页面，则使用get load都可以，由于需要进行登录验证等操作，所以最好选用post方法。

$this->ajaxReturn(data,info);

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

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

摘要：

目录：

参数说明：​URL：必选参数，用于服务器地址callback：函数，用于数据返回处理

参数说明：​URL：必选参数，用于服务器地址data：可选，用于发送数据callback：函数，用于数据返回处理

如果是取简单的页面，则使用get load都可以，由于需要进行登录验证等操作，所以最好选用post方法。

$this->ajaxReturn(data,info);

参数说明：
URL：必选参数，用于服务器地址
callback：函数，用于数据返回处理

参数说明：
URL：必选参数，用于服务器地址
data：可选，用于发送数据
callback：函数，用于数据返回处理