Smarty结合Ajax实现无刷新留言本实例
2018-09-07 14:55
看了标题你也许要说，留言本，很基本的东东啊！谁不会啊，还要用Smarty，这不找累吗？别急，我要表达的是一种编程的思想和结构，而不是证明我做的东西多有意义，通过它相信对初学者学习Smarty和ajax有些启发。原本用ajax做的，可惜始终调试不成功，只好用手写JS来弄了，不过不要紧，还是有一定价值的。站点结构大家下了源代码自己看，代码不长，应该不会看烦^_^，听我慢慢道来。
现在都PHP5了OO（面向对象）很流行了都，这里也不错过，首先来看下我们用OO来实现数据库操作和连接：
[php]
<?php
/**************************
页面：dbclass.php
作者：辉老大
功能：定义数据库操作类
**************************/
<?php
/**************************
页面：dbclass.php
作者：辉老大
功能：定义数据库操作类
**************************/
classdb{
//创建构造函数，作用：数据库连接并选择相应数据库
publicfunction__construct(){
require();
mysql_connect($dbhost,$dbuser,$dbpassword)ordie(error!);
mysql_query(SETNAMESGBK);
mysql_select_db($dbname);
}
//执行SQL语句函数
publicfunctionquery($sql){
returnmysql_query($sql);
}
//取得结果集数组函数
publicfunctionloop_query($result){
returnmysql_fetch_array($result);
}
//创建析构函数，作用：关闭数据库连接
publicfunction__destruct(){
returnmysql_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>
<!--
height: 20px;
width: 250px;
}
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}> 内容：ment}><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(辉老大)
PageName:index.php
FinishDate:2006-12-17
*****************************************/
require(./libs/Smarty.class.php);//包含smarty类库
require(./inc/dbclass.php);//包含数据库操作类
$db=newdb();//生成数据库操作实例
$smarty=newSmarty();//实例化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*frombookinfoorderbyiddesc);
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){//信息已成功返回，开始处理信息
}
else{//页面不正常
alert(您所请求的页面不正常！);
}
}
}
function send(obj){
var f=document.book;
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(辉老大)
PageName:checkbookinfo.php
FinishDate:2006-12-17
*****************************************/
header(Content-type:text/html;charset=GBK);//输出编码,避免中文乱码
include(./inc/dbclass.php);//包含数据库操作类
$db=newdb();//生成数据库操作实例
$sql=insertintobookinfovalues(0,.$comment.,.$username.);
$db->query($sql);
$querysql=select*frombookinfoorderbyiddesc;
$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杂志投稿，大家若是转载，还希望注明版权，谢谢！最后来个效果图～～～～
文章标题：Smarty结合Ajax实现无刷新留言本实例
文章链接：http://soscw.com/index.php/essay/13985.html