该实例通过ThinkPHP结合Ajax与mysql实现了客户端的通信功能,具体如下:
1、使用js的ajax局部刷新功能,每次刷新将数据库中读取出的新记录插入到页面的显示区域,代码如下:
1
|
window.onload =setInterval(showWords1000); //加载完成之后开始执行刷新功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
function showWords() //刷新时被调用函数,实现ajax请求
{
xmlHttp=GetXmlHttpObject(); //从自定义的函数中获取请求对象。
if (xmlHttp== null )
{
alert ( "Browser does not support HTTP Request" )
return ;
}
var url= "index.php?g=Ksks&m=Comments&a=refresh" ; //要请求的路径使用shuipfcms框架,所以g是分组,m是action控制器,a是模板
url=url+ "&data_id=" +$( "#data_id" ).val(); //接上,data_id传的参数,用于查询数据库的id
url=url+ "&lasttime=" +$( "i" ).last().siblings( 'input' ).val(); //lasttime是页面显示数据的最后一个记录的时间戳,查找时根据大于这个时间戳的条件查找
xmlHttp.onreadystatechange=stateChanged; //响应状态改变时调用的函数
xmlHttp.open( "GET" ,url, true ); //使用get方法提交
xmlHttp.send(); //上面传参之后,这句可要可不要
}
function stateChanged() //实现向页面插入数据功能
{
var str = "" ;
if (xmlHttp.readyState==4 || xmlHttp.readyState== "complete" )
{
eval( "var arrs=" +xmlHttp.responseText); //获取由action响应输出的数据,因为数据室php数组格式,需用eval或json转化成js数组格式
var chdiv=$( "#conversation_history" ); //通信聊天记录框
for ( var j=0;j<arrs.length;j++){ //循环插入数据
var obj=$( "<tr><td><h3></h3></td><td></td></tr>" ); //定义页面当中记录框的html格式代码
var i=$( "<i> " +arrs[j].times+ "</i><input type='hidden' value='" +arrs[j].times+ "'>" ); //i标签i为thinkphp定义的直接将时间输出到input隐藏并且存储得到数据里面的聊天发送时间
var p=$( "<p></p>" );
p.html(arrs[j].content); //聊天内容
p.append(i);
var h3value=arrs[j].name; //发送的作者
obj.find( "h3" ).html(h3value+ ":" );
if (h3value== "主持人" )
{obj.find( "h3" ).addClass( "presenter" );} //主持人会特别显示
obj.find( "td:last" ).append(p);
chdiv.append(obj); //追加到table里面
}
chdiv.parent().scrollTop(chdiv.parent()[0].scrollHeight+0); //滚动到底部
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function GetXmlHttpObject() //定义ajax请求对象
{
var xmlHttp= null ;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp= new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp= new ActiveXObject( "Msxml2.XMLHTTP" );
}
catch (e)
{
xmlHttp= new ActiveXObject( "Microsoft.XMLHTTP" );
}
}
return xmlHttp;
}
|
2、action控制器,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
function refresh(){
$data_id = I( 'get.data_id' ); //获得嘉宾id
$lasttime = I( 'get.lasttime' );
//print_r(date("Y-m-d H:i:s",$lasttime));
if (! $data_id )
$this ->error( "该访谈不存在!" );
$data = M( "ksks_words_memoir" );
//print_r(date('Y-m-d H:i:s',$lasttime));
if (! $data )
$this ->error( "初始化数据失败!" );
//$words = $data->where(array('dataid' => $data_id))->order('time asc')->select();
//print_r($data->where(array('time' => $lasttime))->select());
$where [ 'time' ] = array ( 'gt' , $lasttime );
$count = $data ->where( $where )-> count ();
//print_r(date("Y-m-d H:i:s",$lasttime));
$words = $data ->where( $where )->select();
$datas = array (); //要返回的数组
$i = 0;
foreach ( $words as $word )
{
$datas [ $i ][ 'name' ] = $word [ 'name' ];
$datas [ $i ][ 'content' ] = $word [ 'content' ];
$datas [ $i ][ 'times' ] = date ( 'Y-m-d H:i:s' , $word [ 'time' ]);
$lasttime = $word [ 'time' ];
$i = $i +1;
}
setCookie( 'lasttime' , $lasttime );
$datas = json_encode( $datas );
//$this->cache();
echo $datas ;
}
|
3、聊天页面,代码如下:
1
2
3
4
5
6
7
8
9
10
|
< volist name = "words" id = "vo" >
< tr >
< td >< h3 <if condition = "$vo['name']=='主持人'" >class="presenter"</ if >>{$vo.name}:</ h3 ></ td >
< td >
< div >{$vo.content}< i > {$vo.time|date="Y-m-d H:i:s",###}</ i >
< input type = "hidden" name = "time" value = "{$vo.time}" >
</ div >
</ td >
</ tr >
</ volist >
|