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!

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

ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
python编写一个登陆验证程序_Python实现简单登录验证详解
本文实例为大家分享了简单的Python登录验证,供大家参考,具体内容如下编写登录接口要求:1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 #coding=utf-8 __aut ...
ssh无密登录配置详解（hadoop集群搭建）
ssh无密登录原理 Hadoop集群搭建时,配置ssh是给yarn用的,最好先清空.ssh目录下的文件,再生成密钥,在节点中含有resourcemanager的服务器(有多个resourcemanag ...
php 请求拦截,解决拦截器对ajax请求的拦截实例详解
解决拦截器对ajax请求的的拦截拦截器配置:public boolean preHandle(HttpServletRequest request, HttpServletResponse resp ...
thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
ajax和php二级联动,jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图]
jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图] 08-15栏目:技术 TAG:zxfy zxfy 用jQuery的ajax方法,结合PHP,轻松实现省市级的二级联动: h ...
JQuery 总结（8）Ajax 无刷新技术
Ajax 无刷新技术 [ 有get 和post 一一对应] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(".delete& ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...

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

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

摘要：

目录：

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

$this->ajaxReturn(data,info);

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

最新文章

热门文章