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

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

摘要:

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

目录:

  1. jquery实现ajax参数传递的三种方式。
  2. thinkphp中ajaxReturn的取舍问题
  3. 通过外部js映入ajax验证并实现验证功能
  4. 基本验证原理
  5. 相关问题阐述
  • ajax返回内容的选择
  • jquery ready()函数探究
  • 无刷新后ajax失效问题
  • thinkphp路径问题

一、jquery传递ajax参数的三种方式


第一种:load()

$(selector).load(URL,data,callback);

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。


参数说明:

  • ​URL:必选参数,用于服务器地址
  • data:可选,用于发送数据
  • callback:函数,用于数据返回处理


第二种:$.get()

$.get(URL,callback);

$.get()方法只用于取数据,不用于传输参数。

参数说明:

  • ​URL:必选参数,用于服务器地址
  • callback:函数,用于数据返回处理



第三种:$.post()

$.post(URL,data,callback);

.post() 方法通过 HTTP POST 请求从服务器上请求数据。

参数说明:

  • ​URL:必选参数,用于服务器地址
  • data:可选,用于发送数据
  • callback:函数,用于数据返回处理



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


二、是否使用ThinkPHP中的ajaxReturn()

$this->ajaxReturn(data,info);

  • 我们都知道,ajax返回数据的页面不能有输出,否则会将输出一起返回,或者将静态页面返回,因此返回数据的正确决定了应用能正确运行。
  • 第一次使用ajax的时候,就是返回一堆静态页面,包括从数据库返回的崩溃信息,因此颇为头疼。
  • ThinkPHP对ajax进行了数据的封装优化,创造了ajaxReturn函数,在返回数据的确保数据的正确性,但是经过测试发现,当从数据库返回信息崩溃之后,返回的信息依旧是崩溃的错误页面的信息,这一点抓包就能看到。
那么问题来了:是否使用ajaxReturn呢?

个人建议:使用ajaxReturn来返回数据。
  • 使用ajaxReturn可以返回四种格式数据,分别是json,jsonp,xml,eval
  • 使用ajaxRetuen在返回数据中可以进行data[]封装

三、通过外部js映入ajax验证并实现验证功能

代码说明:
  • index.html   (页面)
  • indexAjax.js (ajax调用)
  • IndexController.class.php (逻辑)
index.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> <!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!


你可能感兴趣的:(ThinkPHP+JQuery实现ajax无刷新登录验证(详解+相关问题))