该实例通过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 > |