程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP綜合 >> Smarty結合Ajax實現無刷新留言本實例

Smarty結合Ajax實現無刷新留言本實例

編輯:PHP綜合

看了標題你也許要說,留言本,很基本的東東啊!誰不會啊,還要用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雜志投稿,大家若是轉載,還希望注明版權,謝謝!最後來個效果圖~~~~

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved