频道栏目
首页 > 程序开发 > Web开发 > PHP教程 > PHP框架专栏 > ThinkPHP > 正文
ThinkPHP JQuery Ajax 的实现实例
2016-01-06 18:32:01           
收藏   我要投稿
ThinkPHP JQuery Ajax

ThinkPHP 框架和客户端是完全分离的,没有任何的依赖,而服务端返回 ajaxReturn
方法也是通用的。在《ThinkPHP Ajax 使用详解及实例》一文中,讲述的是 ThinkAjax 类库结合 prototyep 和 mootools
来实现的 Ajax 。事实上可以使用任何 Js 类库来实现 ThinkPHP Ajax ,本文就以 JQuery 来实现《ThinkPHP Ajax
使用详解及实例》一文中同样的功能。
Js 类库

要使用 ThinkPHP JQuery Ajax,需要加载的 Js
类库有:
href="http://www.php1.cn/">
说明:jquery.form.js 类库是一个
JQuery 的插件,在这里用于简化表单的 ajax 交互,可根据实际情况决定是否加载。

这些 Js 类库可以在ThinkPHP 2.1
版本官方示例的 Public/Js/Jquery 下获得,在本节实例代码下载包也提供,请确认在进行 Ajax 测试之前,正确加载了以上 Js
类库。
AJAX 返回

使用 ajaxReturn 与 success/error 这两种方法返回。

关于
ajaxReturn 方法返回具体细节请参阅《ThinkPHP Ajax 使用详解及实例》一文,success/error 返回请参阅《ThinkPHP
success/error 方法返回 Ajax 信息》一文。
ThinkPHP JQuery Ajax 实例

例子功能与《ThinkPHP
Ajax 使用详解及实例》一样,点击(实际使用中也可以使用其他事件来替代) “检测用户名” 按钮检测用户名是否符合要求,点击 “提交”
按钮根据输入的用户名返回不同的信息。
html 文件

Public/loginJauery.html 模板,Js 处理函数及 form
表单:


用户名:


密 码:


 

说明

点击“检查用户名”按钮触发 checkName() 函数,该函数是
JQuery 一个简单的 POST 请求功能以取代复杂 $.ajax。
$('#form1').ajaxForm 用于替代原本的按钮 click 事件 +
$.ajax() 实现,这是 jquery.form.js 插件对 form 提交的简化。
与《ThinkPHP Ajax
使用详解及实例》相比,本文增加了 checkForm() 判断。
返回的数据 data 中,data.data 表示返回的数据,data.info
表示提示信息,data.status 表示状态,分别与 ajaxReturn 前三个参数对应。
由于加载了 jquery.form.js
插件,表单须按一般格式提供 action 值及提交按钮 type="submit" 。
要利用 JQuery 操作更多 html(如追加 html 元素为
append()),请参考 JQuery 手册。

服务端操作

输出 loginJquery.html
模板:
public function
loginJquery(){
$this->display();
}
checkName 及 checkLogin
操作与《ThinkPHP Ajax 使用详解及实例》一文完全一致,为便于查看下面再行列出:
public function checkName(){
if ($_POST['username'] == 'admin'){
$this->success('用户名正确~');
}else{
$this->error('用户名错误!');
}
}
public function checkLogin(){
if ($_POST['username'] == 'admin'){
$this->ajaxReturn($_POST['username'],'用户名正确~',1);
}else{
$this->ajaxReturn('','用户名错误!',0);
}
}

当表单中输入的用户名是 admin
的时候,返回正确信息,否则返回用户名错误的提示。更进一步的,可以将上述 checkLogin 方法进行扩展成为用户登陆检测功能模块。
以上是ThinkPHP JQuery Ajax 的实现过程及关键代码部分,如果您对 ThinkPHP Ajax
还不是很熟悉,还请同时参考本节前面两篇文章《ThinkPHP Ajax 使用详解及实例》与《ThinkPHP success/error 方法返回 Ajax信息》。

要查看该实例完整代码,请参阅《ThinkPHP Ajax 实例代码》。
点击复制链接 与好友分享!回本站首页
相关TAG标签 实例
上一篇:ThinkPHP Ajax 实例源代码
下一篇:ThinkPHP successerror 方法返回 Ajax 信息
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站