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

创建时间：2015-12-29 投稿人：浏览次数：4555

摘要：

使用原生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 HomeController;
use ThinkController;

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!

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

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

摘要：

目录：

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

$this->ajaxReturn(data,info);