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 相关文章推荐
用PHP实现验证码功能
Oct 09 PHP
Yii把CGridView文本框换成下拉框的方法
Dec 03 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
Mar 26 PHP
php检测url是否存在的方法
Apr 14 PHP
php实现粘贴截图并完成上传功能
May 17 PHP
php实现的简单数据库操作Model类
Nov 16 PHP
CI框架表单验证实例详解
Nov 21 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
Feb 20 PHP
老生常谈PHP 文件写入和读取(必看篇)
May 22 PHP
laravel自定义分页效果
Jul 23 PHP
laravel withCount 统计关联数量的方法
Oct 10 PHP
PHP ob缓存以及ob函数原理实例解析
Nov 13 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python提取页面内url列表的方法
2015/05/25 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
python字典与json转换的方法总结
2020/12/28 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
UML设计模式笔试题
2014/06/07 面试题
2013年高中生自我评价
2013/10/23 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
汽修专业自荐信
2014/07/07 职场文书
高中教师个人总结
2015/02/10 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android