首页 > PHP资讯 > HTML5培训技术 > ThinkPHPjQueryAjax的实现实例

ThinkPHPjQueryAjax的实现实例

HTML5培训技术
ThinkPHP JQuery Ajax

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

Js 类库

要使用 ThinkPHP JQuery Ajax,需要加载的 Js 类库有:

说明: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 表单:

function checkName(){
$.post('__URL__/checkName',{'username':$('#username').val()},function(data){
$('#result').html(data.info).show();
$("#result").fadeOut(4000);
},'json');
}

$(function(){
$('#form1').ajaxForm({
beforeSubmit: checkForm, // 表单提交执行前检测
success: complete, // 表单提交后执行函数
dataType: 'json'
});
function checkForm(){
if( '' == $.trim($('#username').val())){
$('#result').html('用户名不能为空!').show();
$("#result").fadeOut(4000);
$('#username').focus();
return false;
}
// 可以在此添加其它判断
}
function complete(data){
if(data.status==1){
$('#result').html(data.info).show();
// 更新列表
username = data.data;
$('#list').html(''+username+'你好!');
}else{
$('#result').html(data.info).show();
// 隐藏上次遗留的信息
$('#list').hide();
}
}
});
//-->
《script》




用户名:


密 码:



说明

点击“检查用户名”按钮触发 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 使用详解及实例》与《ThinkPHPsuccess/error 方法返回 Ajax 信息》。

要查看该实例完整代码,请参阅《ThinkPHP Ajax 实例代码》,或者点击此处下载完整代码。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持49不支持0