首頁 > 後端開發 > php教程 > Smarty結合Ajax實作無刷新留言本實例

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

WBOY
發布: 2016-07-29 08:35:55
原創
908 人瀏覽過

看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用Smarty,这不找累吗?别急,我要表达的是一种编程的思想和结构,而不是证明我做的东西多有意义,通过它相信对初学者学习Smarty和ajax有些启发。原本用ajax做的,可惜始终调试不成功,只好用手写JS来弄了,不过不要紧,还是有一定价值的。站点结构大家下了源代码自己看,代码不长,应该不会看烦^_^,听我慢慢道来。
     现在都PHP5了OO(面向对象)很流行了都,这里也不错过,首先来看下我们用OO来实现数据库操作和连接:
[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"
;
?>
 



<{$title}>





<{*这里显示留言内容*}>
<{section name=loop loop=$bookinfo}><{*循环显示留言*}>
用户名:<{$bookinfo[loop].username}> 内容:<{$bookinfo[loop].comment}>


<{/section}>



  

      
      
   
   
      


   
  
使用者名稱:
留言內容:
  
php
  

/*****************************************   Title :Smarty結合Ajax留言板實例

   Author:leehui1983(輝老大)
   Page Name:index.php
   Finish1:Date Name:index.php
   Finish* ******************************/
  require('./libs/Smarty.class.php');

);
/包含smarty類庫  require(
'./inc/dbclass.php');
//包含資料庫操作類別  $db = new 
db
db//產生資料庫操作實例  
$smarty = new 
Smart> //實例化smarty物件  $smarty->template_ = 
"./templates";
//設定模板目錄 >$smarty->compile_dir  "./templates_c"
"./templates_c"
; 🎜>
//設定編譯目錄  $smarty->快取   ; 
//設定快取方式  /********************** ******* ************************  邊界左右符,預設為{},但實際應用容易與JavaScript
  相衝突,所以建議設定或其他。
  *********************************************** ******/
  
$smarty->left_delimiter  
  
$smarty->right_del>->right_deloter > 🎜>"}>"
;  
$smarty
->->('title','smarty結合ajax製作簡單留言板');
//替換範本內容
  //設定初始Smarty顯示的留言內容
  
$rt 🎜>$db->query("select * from >);  while(
$rs=
$db->$db->$db->$db->
$db
->
$db->($rt)){   $array   $array ("username"=>$rs[
'username'

'username'], "comment"=>$rs['comment'
['comment'
]);  }  
$smarty
->
assign->assign->assign bookinfo"
,
$array
);
  unset ($ );



//銷毀陣列變數
  

$smarty

->

>p. >(

"index.tpl"

);



//編譯並顯示位於./templates下的index.tpl模板


?>
 

頁面實例的註解還是比較多的,大家參考下Smarty
手冊
這個是So easy的! !呵呵~~~
接下來到了介紹ajax的時候,這裡我們用一個基本的開發框架來實現,關於ajax的知識建議大家看看網上非常流行的電子教程ajax開發簡略
var http_request= false;
  function send_request(url){//初始化,指定處理函數,發送請求的函數
    http_request=false;
//開始初始化XMLHttpRequest物件
if(winquest.XML/HttpRe /Mozilla瀏覽器
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){//設定MIME類別
   }
else if(window.ActiveXObject){//IE瀏覽器
  try{
   http_request=new ActiveXObject("Msxml2.XMLHttp"); {
   http_request=new ActiveXobject("Microsoft.XMLHttp");
   }catch(e){}
  }
 失敗
  window.alert("建立XMLHttp物件失敗!");
  return false;
}http_request.>//確定傳送請求方式,URL,及是否同步執行下段程式碼    http_request.open("GET",url,true);http_request.send(null);  }  //處理回傳訊息的函數 (http_request.readyState==4){//判斷物件狀態     if(http_request.status==200){//資訊已成功回傳,開始處理資訊   document.getElementById(reobj).innerML=http_request .responseText;  }  else{//頁面不正常   alert("您所要求的頁面不正常! ");  }   }  }  function send(obj){   var f=document.book;{   var f=document.book;>username. comment=f.comment.value;   if(username==""||comment==""){   document.getElementById(obj).innerHTML="請填入完整!";
   return false;
   }
   else{
   send_request('checkbookinfo.phpo​​nat='+username+''comment   }
  }
這樣我們點「發布」按鈕,資料就會交由伺服器非同步處理,透過JS來組織非同步更新,在發過留言後你馬上就能看見你的留言而不是傳統的等待頁面跳轉,那麼資料傳到哪裡處理呢? 🎜>

/*****************************************   Title :Smarty結合Ajax留言板實例   Author:leehui1983(輝老大)   Page Name:checkbookinfo.php   Finish Date  :2006-12-17  
header
("Content-type: GBK"
);



//輸出編碼,避免中文亂碼
  
include(  include(. inc/dbclass.php'
);
//包含數據庫操作類  $db= new 
db();
//產生資料庫操作實例  //產生資料庫操作實例  $ 🎜>=
"insert into bookinfo values(0,'"
.
$comment .$username."')";;;
$db->
query($sql$sql
$ );  
$querysql="select * from bookinfo order by id>  
$result=
$db->query->query $querysql
);  while(
$rows
=$rows=$rows ->loop_query($result
)){
//列印留言列表,用於即時更新
  //$arr.="
使用者名稱:{$rows['username']} 內容:{$rows['comment']}

";

  echo '用戶名:'.$rows['username'].' 內容:'.$rows[$rows[$rows
[
$rows
[
'comment'
].
'

'

;

  }

 

;

  }  >//echo $arr;?> 嗯,先插入數據,在更新後的數據透過JS組織顯示,AJAX看來真的不錯哦!大體就介紹完了,不知道大家想過沒有,加個 iframe可以改成什麼?對!無刷新聊天室,發揮你的能力,實現一個看看。這個例子用到了OO,AJAX,SMARTY,東西還是蠻多滴,希望大家喜歡,我已經決定將此文向PHP雜誌投稿,大家若是轉載,還希望註明版權,謝謝!最後來個效果圖~~~~ 以上就介紹了 Smarty結合Ajax實作無刷新留言本實例,包含了方面的內容,希望對PHP教學有興趣的朋友有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板