5iDev ThinkPHP教程 ThinkPHP Ajax 实例源代码
ThinkPHP Ajax 实例源代码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('-Article/checkName','ajax=1&username='+$('username').value,'','result'); } function loginCheck(){ ThinkAjax.sendForm('form1','-Article/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('-Article/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="-Article/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('用户名错误！'); } } } ?>本章节内容共分 4 部分：
查看评论
#1楼 [2011-09-29 17:22] strong
很适合新手,3Q站长
#2楼 [2012-02-22 21:55] tplearner
相关文章
精彩导读
热门资讯
关注我们
