Smarty结合Ajax实现无刷新留言本实例
作者:bea
看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用Smarty,这不找累吗?别急,我要表达的是一种编程的思想和结构,而不是证明我做的东西多有意义,通过它相信对初学者学习Smarty和ajax有些启发。原本用ajax做的,可惜始终调试不成功,只好用手写JS来弄了,不过不要紧,还是有一定价值的。站点结构大家下了源代码自己看,代码不长,应该不会看烦^_^,听我慢慢道来。 现在都PHP5了OO(面向对象)很流行了都,这里也不错过,首先来看下我们用OO来实现数据库操作和连接:
看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用Smarty,这不找累吗?别急,我要表达的是一种编程的思想和结构,而不是证明我做的东西多有意义,通过它相信对初学者学习Smarty和ajax有些启发。原本用ajax做的,可惜始终调试不成功,只好用手写JS来弄了,不过不要紧,还是有一定价值的。站点结构大家下了源代码自己看,代码不长,应该不会看烦^_^,听我慢慢道来。 现在都PHP5了OO(面向对象)很流行了都,这里也不错过,首先来看下我们用OO来实现数据库操作和连接:[php]<?php/************************** 页面:dbclass.php 作者:辉老大 功能:定义数据库操作类**************************/<?php/************************** 页面:dbclass.php 作者:辉老大 功能:定义数据库操作类**************************/class db{ //创建构造函数,作用:数据库连接并选择相应数据库 public function __construct(){ require('config.inc.php'); mysql_connect($dbhost,$dbuser,$dbpassword) or die("error!"); mysql_query("SET NAMES 'GBK'"); mysql_select_db($dbname); } //执行SQL语句函数 public function query($sql){ return mysql_query($sql); } //取得结果集数组函数 public function loop_query($result){ return mysql_fetch_array($result); } //创建析构函数,作用:关闭数据库连接 public function __destruct(){ return mysql_close(); } }?> 这个类有什么特点呢?首先介绍下__construct()是构造函数,啥是构造函数?通俗点讲就是类被实例化后就自动执行的函数,__destruct()是啥?是析构函数,它的作用就是在没有任何方法指向这个对象时,便自动销毁对象,里面一般包含一些收尾的操作,比如关闭文件,关闭数据库连接之类的方法,看到这你是不是明白一些了?没错!在类实例化的时候自动执行带有数据库连接方法的构造函数,在实例销毁的时候执行关闭数据库连接的析构函数,对于一些基本数据操作我们只要new一个$db对象,然后$db->query()...是不是很方便,当然,这只是一个简单的例子,你还可以继续扩展。来看看 config.inc.php里面是什么:很容易对不对,感兴趣就接着看吧^_^,来看下模板文件:
<?php/************************* 页面:config.inc.php 作者:辉老大 功能:数据库参数变量设定 $dbhost:主机名 $dbuser:连接帐户 $dbpassword:连接密码 $dbname:数据库名*************************/ $dbhost = "localhost"; $dbuser = "root"; $dbpassword = "7529639"; $dbname = "testdb";?> <html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title><{$title}></title><style type="text/css"><!--.username {height: 20px;width: 250px;}.comment {height: 100px;width: 660px;}body,td,tr {font-size: 9pt;}--></style><script language="javascript" src="./inc/ajax.js"></script></head><body><div align="right" id="check"></div><div id="result"><{*这里显示留言内容*}><{section name=loop loop=$bookinfo}><{*循环显示留言*}>用户名:<{$bookinfo[loop].username}> 内容:<{$bookinfo[loop].comment}><p><{/section}></div><form method="post" name="book" id="book"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="80" height="30" align="center">用户名:</td> <td height="30"> <input name="username" type="text" class="username" id="username"></td> </tr> <tr> <td width="80" height="120" align="center">留言内容:</td> <td height="120"> <textarea name="comment" class="comment" id="comment"></textarea></td> </tr> </table> <input type="button" name="button" value="发布" onClick="send('result');"> </form></body></html>模板中的内容在<{}>中的一会会被PHP替换掉,这就实现了美工和程序员的分工,不错吧有关Smarty的内容还请参考手册,这里就不便多说。来看下页面是怎么输出模板的吧:
<?php /***************************************** Title :Smarty结合Ajax留言板
实例
Author:leehui1983(辉老大) Page Name:index.php Finish Date :2006-12-17 *****************************************/ require('./libs/Smarty.class.php');//包含smarty类库 require('./inc/dbclass.php');//包含
数据库
操作类 $db = new db();//生成数据库操作实例 $smarty = new Smarty();//实例化smarty对象 $smarty->template_dir = "./templates";//设置
模板
目录 $smarty->compile_dir = "./templates_c"; //设置编译目录 $smarty->caching = false; //设置缓存方式 /***************************************************** 左右边界符,默认为{},但实际应用当中容易与JavaScript 相冲突,所以建议设成<{}>或其它。 *****************************************************/ $smarty->left_delimiter = "<{"; $smarty->right_delimiter = "}>"; $smarty->assign('title','smarty结合ajax制作简单留言板');//替换模板内容 //设置初始
页面
由Smarty显示的留言内容 $rt=$db->query("select * from bookinfo order by id desc"); while($rs=$db->loop_query($rt)){ $array[]=array("username"=>$rs['username'],"comment"=>$rs['comment']); } $smarty->assign("bookinfo",$array); unset ($array);//销毁数组变量 $smarty->display("index.tpl");//编译并显示位于./templates下的index.tpl模板?> 页面实例的注释还是比较多的,大家参考下Smarty
手册
这个是So easy的!!呵呵~~~~接下来到了介绍ajax的时候,这里我们用一个基本的开发框架来实现,关于ajax的知识建议大家看看网上非常流行的电子教程ajax开发简略var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMimeType){//设置MIME类别 http_request.overrideMimeType("text/xml"); }}else if(window.ActiveXObject){//IE浏览器 try{ http_request=new ActiveXObject("Msxml2.XMLHttp"); }catch(e){ try{ http_request=new ActiveXobject("Microsoft.XMLHttp"); }catch(e){} } }if(!http_request){//异常,创建对象实例失败 window.alert("创建XMLHttp对象失败!"); return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式,URL,及是否同步执行下段代码 http_request.open("GET",url,true);http_request.send(null); } //处理返回信息的函数 function processrequest(){ if(http_request.readyState==4){//判断对象状态 if(http_request.status==200){//信息已成功返回,开始处理信息 document.getElementById(reobj).innerHTML=http_request.responseText; } else{//页面不正常 alert("您所请求的页面不正常!"); } } } function send(obj){ var f=document.book; var username=f.username.value; var comment=f.comment.value; if(username==""||comment==""){ document.getElementById(obj).innerHTML="<font color=red>请填写完整!</font>"; return false; } else{ send_request('checkbookinfo.php?username='+username+'&comment='+comment); reobj=obj; } }这样我们点“发布”按钮,数据就会交由服务器异步处理,通过JS来组织异步更新,在发过留言后你马上就能看见你的留言而不是传统的等待页面跳转,那么数据传到哪里处理呢?看这里:<?php /***************************************** Title :Smarty结合Ajax留言板实例 Author:leehui1983(辉老大) Page Name:checkbookinfo.php Finish Date :2006-12-17 *****************************************/ header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 include('./inc/dbclass.php');//包含数据库操作类 $db=new db();//生成数据库操作实例 $sql="insert into bookinfo values(0,'".$comment."','".$username."')"; $db->query($sql); $querysql="select * from bookinfo order by id desc"; $result=$db->query($querysql); while($rows=$db->loop_query($result)){//打印留言列表,用于实时更新 //$arr.="
用户名
:{$rows['username']} 内容:{$rows['comment']}<p>"; echo '用户名:'.$rows['username'].' 内容:'.$rows['comment'].'<p>'; } //echo $arr;?> 嗯,先插入数据,在将更新后的数据通过JS组织显示,AJAX看来真的不错哦!大体就介绍完了,不知道大家想过没有,加个 iframe可以改成什么?对!无刷新聊天室,发挥你的能力,实现一个看看。这个例子用到了OO,AJAX,SMARTY,东西还是蛮多滴,希望大家喜欢,我已经决定将此文向PHP杂志投稿,大家若是转载,还希望注明版权,谢谢!最后来个
效果图
~~~~
有用 | 无用
<?php/************************* 页面:config.inc.php 作者:辉老大 功能:数据库参数变量设定 $dbhost:主机名 $dbuser:连接帐户 $dbpassword:连接密码 $dbname:数据库名*************************/ $dbhost = "localhost"; $dbuser = "root"; $dbpassword = "7529639"; $dbname = "testdb";?> <html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title><{$title}></title><style type="text/css"><!--.username {height: 20px;width: 250px;}.comment {height: 100px;width: 660px;}body,td,tr {font-size: 9pt;}--></style><script language="javascript" src="./inc/ajax.js"></script></head><body><div align="right" id="check"></div><div id="result"><{*这里显示留言内容*}><{section name=loop loop=$bookinfo}><{*循环显示留言*}>用户名:<{$bookinfo[loop].username}> 内容:<{$bookinfo[loop].comment}><p><{/section}></div><form method="post" name="book" id="book"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="80" height="30" align="center">用户名:</td> <td height="30"> <input name="username" type="text" class="username" id="username"></td> </tr> <tr> <td width="80" height="120" align="center">留言内容:</td> <td height="120"> <textarea name="comment" class="comment" id="comment"></textarea></td> </tr> </table> <input type="button" name="button" value="发布" onClick="send('result');"> </form></body></html>模板中的内容在<{}>中的一会会被PHP替换掉,这就实现了美工和程序员的分工,不错吧有关Smarty的内容还请参考手册,这里就不便多说。来看下页面是怎么输出模板的吧:
<?php /***************************************** Title :Smarty结合Ajax留言板
实例
Author:leehui1983(辉老大) Page Name:index.php Finish Date :2006-12-17 *****************************************/ require('./libs/Smarty.class.php');//包含smarty类库 require('./inc/dbclass.php');//包含
数据库
操作类 $db = new db();//生成数据库操作实例 $smarty = new Smarty();//实例化smarty对象 $smarty->template_dir = "./templates";//设置
模板
目录 $smarty->compile_dir = "./templates_c"; //设置编译目录 $smarty->caching = false; //设置缓存方式 /***************************************************** 左右边界符,默认为{},但实际应用当中容易与JavaScript 相冲突,所以建议设成<{}>或其它。 *****************************************************/ $smarty->left_delimiter = "<{"; $smarty->right_delimiter = "}>"; $smarty->assign('title','smarty结合ajax制作简单留言板');//替换模板内容 //设置初始
页面
由Smarty显示的留言内容 $rt=$db->query("select * from bookinfo order by id desc"); while($rs=$db->loop_query($rt)){ $array[]=array("username"=>$rs['username'],"comment"=>$rs['comment']); } $smarty->assign("bookinfo",$array); unset ($array);//销毁数组变量 $smarty->display("index.tpl");//编译并显示位于./templates下的index.tpl模板?> 页面实例的注释还是比较多的,大家参考下Smarty
手册
这个是So easy的!!呵呵~~~~接下来到了介绍ajax的时候,这里我们用一个基本的开发框架来实现,关于ajax的知识建议大家看看网上非常流行的电子教程ajax开发简略var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMimeType){//设置MIME类别 http_request.overrideMimeType("text/xml"); }}else if(window.ActiveXObject){//IE浏览器 try{ http_request=new ActiveXObject("Msxml2.XMLHttp"); }catch(e){ try{ http_request=new ActiveXobject("Microsoft.XMLHttp"); }catch(e){} } }if(!http_request){//异常,创建对象实例失败 window.alert("创建XMLHttp对象失败!"); return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式,URL,及是否同步执行下段代码 http_request.open("GET",url,true);http_request.send(null); } //处理返回信息的函数 function processrequest(){ if(http_request.readyState==4){//判断对象状态 if(http_request.status==200){//信息已成功返回,开始处理信息 document.getElementById(reobj).innerHTML=http_request.responseText; } else{//页面不正常 alert("您所请求的页面不正常!"); } } } function send(obj){ var f=document.book; var username=f.username.value; var comment=f.comment.value; if(username==""||comment==""){ document.getElementById(obj).innerHTML="<font color=red>请填写完整!</font>"; return false; } else{ send_request('checkbookinfo.php?username='+username+'&comment='+comment); reobj=obj; } }这样我们点“发布”按钮,数据就会交由服务器异步处理,通过JS来组织异步更新,在发过留言后你马上就能看见你的留言而不是传统的等待页面跳转,那么数据传到哪里处理呢?看这里:<?php /***************************************** Title :Smarty结合Ajax留言板实例 Author:leehui1983(辉老大) Page Name:checkbookinfo.php Finish Date :2006-12-17 *****************************************/ header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 include('./inc/dbclass.php');//包含数据库操作类 $db=new db();//生成数据库操作实例 $sql="insert into bookinfo values(0,'".$comment."','".$username."')"; $db->query($sql); $querysql="select * from bookinfo order by id desc"; $result=$db->query($querysql); while($rows=$db->loop_query($result)){//打印留言列表,用于实时更新 //$arr.="
用户名
:{$rows['username']} 内容:{$rows['comment']}<p>"; echo '用户名:'.$rows['username'].' 内容:'.$rows['comment'].'<p>'; } //echo $arr;?> 嗯,先插入数据,在将更新后的数据通过JS组织显示,AJAX看来真的不错哦!大体就介绍完了,不知道大家想过没有,加个 iframe可以改成什么?对!无刷新聊天室,发挥你的能力,实现一个看看。这个例子用到了OO,AJAX,SMARTY,东西还是蛮多滴,希望大家喜欢,我已经决定将此文向PHP杂志投稿,大家若是转载,还希望注明版权,谢谢!最后来个
效果图
~~~~
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 推荐php模板技术[转]
- 推荐个功能齐全的发送PHP邮件类
- php和js交互一例-PHP教程,PHP应用
- URL Rewrite的设置方法
- 帖几个PHP的无限分类实现想法~
- PHP+MYSQL开发工具及资源收藏
- 分享PHP入门的学习方法
- php中常用编辑器推荐
- PHP中的日期处理方法集锦
- PHP语法速查表
- 影响PHP+MYSQL执行速度的写法对比
- require(),include(),require_once()和include_once()的异同
- 开发大型 PHP 项目的方法
- phpwind中的数据库操作类
- PHP无限分类的类
- php你的验证码安全码?
- 一个PHP操作Access类(PHP+ODBC+Access)
- 一个用php实现的获取URL信息的类
- PHP 和 MySQL 开发的 8 个技巧