看了標題你也許要說，留言本，很基本的東東啊！誰不會啊，還要用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雜誌投稿，大家若是轉載，還希望註明著作權，謝謝！最後來個效果圖～～～～
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
