Smarty结合Ajax实现无刷新留言本实例
时间：2006-12-18
来源：互联网
现在都PHP5了OO（面向对象）很流行了都，这里也不错过，首先来看下我们用OO来实现数据库操作和连接：
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();
}
}
?>
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代码:
<?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模板
?>
接下来到了介绍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;
}
}
PHP代码:
<?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;
?>
test.rar (95.03 KB)
2006-12-17 19:27, 下载次数: 1911
源码（带建表SQL）
作者: leehui1983 发布时间: 2006-12-17
:lol 作者: leehui1983 发布时间: 2006-12-17
不过我有一个个人想法.你得程序就重构页面方面.你是用php生成了全部页面内容让后用javascript读出php得页面显示.这么做.服务器完成了99%得工作.客户端.完成了1%得工作.这个好像和ajax得初衷有违背哦.也就是说.既然你得php已经完全生成好了页面.就没有必要多javascript这个环节了.
直接用php显示就好了.多个环节,多了服务器开销,多了出错机会.也加大了开发难度.
而通常对ajax得认识我们需要把数据库里面需要得内容读出来封装为xml然后传给客户端.
客户端获取到数据包后在重构页面.(Ajax 就是 Asynchronous JavaScript+XML javascrpt 使用xml和服务器异步数据交流 )
这样做得好处是传输内容少了很多.服务器运算量少了很多.
自然我们就值得这么做了.应为服务端运算可以是1%-10%.而90%得运算量交给客户端用javascript搞定去了.
单看你得流程可是没有做到ajax得初衷哦.不能是为了ajax而ajax.没有提程序性能,甚至加大了开销.同样是ajax,细微得差别里面折射出可是很眩目得阳光哦.
虽然是很简单得程序.不过还是很多值得思考得地方.
[ 本帖最后由 ocheers 于 2006-12-17 20:22 编辑 ]
作者: ocheers 发布时间: 2006-12-17
作者: leehui1983 发布时间: 2006-12-17
不是这样：） JS能作很多事，哈哈，作客户端缓存，嘎嘎，第一次听吓我一跳，后来才知道原来就是JS的全局变量，哈哈～
作者: Phzzy 发布时间: 2006-12-17
引用:
原帖由 <i>Phzzy</i> 于 2006-12-17 20:23 发表<br />依我个人愚见，ajax的富客户端的富指的是表现能力丰富，不是分摊服务器的工作。<br />
<br />
不是这样：） JS能作很多事，哈哈，作客户端缓存，嘎嘎，第一次听吓我一跳，后来才知道原来就是JS的全局变量，哈哈～
呵呵，我还要加油啊，可能我太注重自己的感受，和受了一些书籍的影响，继续学习了，谢谢楼上大大
作者: leehui1983 发布时间: 2006-12-17
如果按照Asynchronous JavaScript+XML得标准来实现程序.自然也可以分摊服务器工作
老美没说ajax是来摊服务器工作得.是因为没有必要说.这个是功能是显而易见得.
我只所以拿出来说.
是我觉得在中国我感觉很多程序员没意识到
我说了.大家可以多一些对ajax得思考.
[ 本帖最后由 ocheers 于 2006-12-17 20:38 编辑 ]
作者: ocheers 发布时间: 2006-12-17
引用:
原帖由 ocheers 于 2006-12-17 20:28 发表ajax不但客户端表现丰富.
如果按照Asynchronous JavaScript+XML得标准来实现程序.自然也可以分摊服务器工作
老美没说ajax是来摊服务器工作得.是因为没有必要说.这个是功能是显而易见得.
我只所以拿出来说 ...
作者: leehui1983 发布时间: 2006-12-17
引用:
原帖由 Phzzy 于 2006-12-17 20:23 发表依我个人愚见，ajax的富客户端的富指的是表现能力丰富，不是分摊服务器的工作。
不是这样：） JS能作很多事，哈哈，作客户端缓存，嘎嘎，第一次听吓我一跳，后来才知道原来就是JS的全局变量，哈哈～
不信检查缓存把.一定什么都找不到.因为我得程序一个很关键得地方就是做了no cache.
作者: ocheers 发布时间: 2006-12-17
作者: leehui1983 发布时间: 2006-12-17
我先闪了，回寝室看你程序。。呵呵～
作者: Phzzy 发布时间: 2006-12-17
写php已经8年了.初学得时候连本中文书都找不到.
写ajax2年了.刚学得时候google上得资料都是少得可怜.
很多时候在探索啊.喜欢这玩意,就好这口了.
特支持php.听说中国php官方站.就来了.
一是学习.二是交流.
[ 本帖最后由 ocheers 于 2006-12-17 21:23 编辑 ]
作者: ocheers 发布时间: 2006-12-17
引用:
原帖由 ocheers 于 2006-12-17 20:45 发表刚来.不知道水深.
写php已经8年了.初学得时候连本中文书都找不到.
写ajax2年了.刚学得时候google上得资料都是少得可怜.
很多时候在探索啊.喜欢这玩意,就好这口了.
特持php.听说中国php官方站.就来了 ...
作者: leehui1983 发布时间: 2006-12-17
学习了
作者: fengyun 发布时间: 2006-12-17
关注中......
作个标签先.
作者: hy0kl 发布时间: 2006-12-19
这里是我的一篇关于ajax应用的留言板设计思路
留言板虽小,但是会了留言板.自然就会了新闻系统,论坛,聊天室,等等了.
作者: ocheers 发布时间: 2006-12-19
作者: Ben 发布时间: 2006-12-19
引用:
原帖由 ocheers 于 2006-12-19 18:57 发表http://www.phpchina.com/bbs/thread-13709-1-1.html
这里是我的一篇关于ajax应用的留言板设计思路
留言板虽小,但是会了留言板.自然就会了新闻系统,论坛,聊天室,等等了.
作者: leehui1983 发布时间: 2006-12-19
引用:
无论你的PHP程序有多少漏洞,只要...只要不发布的网络上,它就是非常安全的.没发源,可是发了思路.一样拉.
我们有很多时候缺的不是代码的堆叠,而是思路.
其实对于我来说.看一下别人的程序,我就能写一个难说比他好的程序,因为他的优点我看到了.缺点我也看到了.
那么我还缺什么呢.
动手都没那么重要了.思考....
[ 本帖最后由 ocheers 于 2006-12-19 21:56 编辑 ]
作者: ocheers 发布时间: 2006-12-19
作者: dzjzmj 发布时间: 2006-12-19
http://www.phpchina.com/bbs/thread-13739-1-1.html
我不说思路,又有多少人会这样做呢.代码不过10行.
但是可以实现多少有意思的东西呢???
(使用了很多图,国外服务器,所以打开请多等一下,没出来就在刷新.)
[ 本帖最后由 ocheers 于 2006-12-19 21:50 编辑 ]
作者: ocheers 发布时间: 2006-12-19
作者: leehui1983 发布时间: 2006-12-19
作者: newbird 发布时间: 2006-12-29
作者: 玉面修罗 发布时间: 2006-12-29
作者: ttym 发布时间: 2007-01-07
运行后会报这行:(document.getElementById(reobj).innerHTML=http_request.responseText) reobj未定义
作者: willke 发布时间: 2007-01-11
引用:
原帖由 leehui1983 于 2006-12-17 20:40 发表这位大哥来头不小啊，牛人来着
作者: remote_addr 发布时间: 2007-01-13
作者: skyfen 发布时间: 2007-01-16
作者: skyfen 发布时间: 2007-01-16
希望会有好的解决方案:)
作者: 编程骇客 发布时间: 2007-01-19
作者: leehui1983 发布时间: 2007-01-20
作者: leguan 发布时间: 2007-01-22
作者: hui07 发布时间: 2007-01-30
[ 本帖最后由 lmhllr 于 2007-2-1 09:07 编辑 ]
作者: lmhllr 发布时间: 2007-01-31
作者: leehui1983 发布时间: 2007-02-01
作者: lmhllr 发布时间: 2007-02-01
引用:
原帖由 leehui1983 于 2006-12-17 20:22 发表谢谢楼上的意见，可能我现在还是学生，企业及的水准我还不具备，我用AJAX只是改善用户体验，没想过服务端和客户端的工作分配问题，依我个人愚见，ajax的富客户端的富指的是表现能力丰富，不是分摊服务器的工作。
作者: ysixin 发布时间: 2007-02-01
引用:
原帖由 leehui1983 于 2006-12-17 20:07 发表没人顶？我还希望斑竹加精呢
:lol
作者: 小陈 发布时间: 2007-02-04
作者: piecesfx 发布时间: 2007-02-13
作者: qingis 发布时间: 2007-02-21
$sql="insert into bookinfo values(0,'".$comment."','".$username."')";
前面是不是要加 $_GET 先获得 ?
作者: flashtom 发布时间: 2007-03-20
作者: aceblues 发布时间: 2007-04-07
作者: dandankai 发布时间: 2007-04-16
作者: 排队上天堂 发布时间: 2007-04-28
可以运行出来效果？
好像JS代码部分有点问题。
作者: kelvin_1984 发布时间: 2007-04-29
继续关注
作者: eoe2005 发布时间: 2007-04-30
引用:
原帖由 flashtom 于 2007-3-20 11:14 发表onClick="send('result');" 这个result是DIV的那个NAME吗？
$sql="insert into bookinfo values(0,'".$comment."','".$username."')";
前面是不是要加 $_GET 先获得 ?
作者: hbudazhuang 发布时间: 2007-06-28
作者: CIV 发布时间: 2008-06-23
作者: kingboer 发布时间: 2008-07-17
�y道的都交�oajax做了？那�泳��]有意�x了。
作者: konakona 发布时间: 2008-07-28
作者: iphpmysql 发布时间: 2008-08-14
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
