Smarty结合Ajax实现无刷新留言本实例


Posted in PHP onJanuary 02, 2007

看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用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 相关文章推荐
CakePHP去除默认显示的标题及图标的方法
Oct 22 PHP
php adodb介绍
Mar 19 PHP
开源php中文分词系统SCWS安装和使用实例
Apr 11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
Jun 30 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
Nov 17 PHP
PHP实现通过get方式识别用户发送邮件的方法
Jul 16 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
May 17 PHP
示例详解Laravel的注册重构
Aug 14 PHP
PHP文件系统管理(实例讲解)
Sep 19 PHP
PHP共享内存使用与信号控制实例分析
May 09 PHP
PHP批斗大会之缺失的异常详解
Jul 09 PHP
PHP中国际化的字符串排序和比较对象详解
Aug 23 PHP
Ajax PHP分页演示
Jan 02 #PHP
windows下PHP APACHE MYSQ完整配置
Jan 02 #PHP
PHP Ajax实现页面无刷新发表评论
Jan 02 #PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
Jan 02 #PHP
新手学PHP之数据库操作详解及乱码解决!
Jan 02 #PHP
默默小谈PHP&amp;MYSQL分页原理及实现
Jan 02 #PHP
默默简单的写了一个模板引擎
Jan 02 #PHP
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python与字符编码问题
2019/05/24 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python tcp传输代码实例解析
2020/03/18 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
keras得到每层的系数方式
2020/06/15 Python
国贸专业的职业规划书
2014/03/15 职场文书
商务英语专业求职信
2014/06/26 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2016新年年会主持词
2015/07/06 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Python利用FlashText算法实现替换字符串
2022/03/31 Python