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 相关文章推荐
模拟flock实现文件锁定
Feb 14 PHP
php 获取完整url地址
Dec 20 PHP
php str_pad 函数用法简介
Jul 11 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
Oct 05 PHP
PHP-Fcgi下PHP的执行时间设置方法
Aug 02 PHP
PHP遍历并打印指定目录下所有文件实例
Feb 10 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
Jun 23 PHP
Yii2中DropDownList简单用法示例
Jul 18 PHP
php求今天、昨天、明天时间戳的简单实现方法
Jul 28 PHP
LNMP部署laravel以及xhprof安装使用教程
Sep 14 PHP
PHP树形结构tree类用法示例
Feb 01 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
Feb 21 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
全文搜索和替换
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python中的协程深入理解
2019/06/10 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Tensorflow累加的实现案例
2020/02/05 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
奥运会口号
2014/06/13 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书