ThinkPHP Ajax 实例源代码
以下列出了本节 ThinkPHP Ajax 实例的完整源代码,您也可以 点击此处 下载完整的源代码压缩包。
Public/login.html 模板
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ThinkPHP Ajax 实现示例</title> <load href="__PUBLIC__/Js/Base.js" /> <load href="__PUBLIC__/Js/prototype.js" /> <load href="__PUBLIC__/Js/mootools.js" /> <load href="__PUBLIC__/Js/Ajax/ThinkAjax.js" /> <script language="JavaScript"> <!-- function checkName(){ ThinkAjax.send('__URL__/checkName','ajax=1&username='+$('username').value,'','result'); } function loginCheck(){ ThinkAjax.sendForm('form1','__URL__/checkLogin',complete,'result'); } function complete(data,status){ if (status==1) { // 提示信息 $('list').innerHTML = '<span style="color:blue">'+data+'你好!</span>'; } } //--> </script> </head> <body> <div> <div id="result"></div> <div id="list"></div> <form name="login" id="form1" method="post"> 用户名: <input type="text" name="username" /> <input type="button" value="检查用户名" onClick="checkName()"><br /> 密 码: <input type="password" name="password" /><br /> <input type="button" onClick="loginCheck()" value="提 交" /> </form> </div> </body> </html>
Public/loginJquery.html 模板
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ThinkPHP JQuery Ajax 实现示例</title> <load href="__PUBLIC__/Js/Jquery/jquery.js" /> <load href="__PUBLIC__/Js/Jquery/jquery.form.js" /> <script language="JavaScript"> <!-- 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('<span style="color:blue">'+username+'你好!</span>'); }else{ $('#result').html(data.info).show(); // 隐藏上次遗留的信息 $('#list').hide(); } } }); //--> </script> </head> <body> <div> <div id="result"></div> <div id="list"></div> <form name="login" id="form1" method="post" action="__URL__/checkLogin"> 用户名: <input type="text" name="username" id="username" /> <input type="button" value="检查用户名" onClick="checkName()"><br /> 密 码: <input type="password" name="password" /><br /> <input type="hidden" name="ajax" value="1"> <input type="submit" value="提 交"> </form> </div> </body> </html>
Public 模块相关操作
<?php class PublicAction extends Action{ public function login(){ $this->display(); } public function checkName(){ if ($_POST['username'] == 'admin'){ $this->success('用户名正确~'); }else{ $this->error('用户名错误!'); } } public function checkLogin(){ if($_POST['username'] == 'admin'){ $this->ajaxReturn($_POST['username'],'用户名正确~',1); // success 方法返回 //$this->success('用户名正确~',true); // 加载了 Js/Form/CheckForm.js 类库或提交了 ajax=1 隐藏表单元素 //$this->success('用户名正确~'); }else{ $this->ajaxReturn('','用户名错误!',0); // error 方法返回 //$this->error('用户名错误!',true); // 加载了 Js/Form/CheckForm.js 类库或提交了 ajax=1 隐藏表单元素 //$this->error('用户名错误!'); } } } ?>