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模板技术原理【一】
Jan 10 PHP
PHP实现定时生成HTML网站首页实例代码
Nov 20 PHP
常见的PHP五种设计模式小结
Mar 23 PHP
PHP基础学习之流程控制的实现分析
Apr 28 PHP
php查找指定目录下指定大小文件的方法
Nov 28 PHP
php实现TCP端口检测的方法
Apr 01 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
Apr 20 PHP
ThinkPHP防止重复提交表单的方法实例分析
May 10 PHP
PHP bin2hex()函数基础实例讲解
Feb 11 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
Apr 09 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
Dec 16 PHP
一次项目中Thinkphp绕过禁用函数的实战记录
Nov 17 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
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
英语复习计划
2015/01/19 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
python小型的音频操作库mp3Play
2022/04/24 Python