本篇文章主要讲解php+ajax搭建简易聊天室实践,文中有关php,ajax的内容,有需要的小伙伴参考下。
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" style="text/css" href="./css/talk.css" /> <script type="text/javascript"> var maxID = 0; //获取最新的聊天消息 function showmsg(){ //ajax去获取 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ eval("var jn_info="+xhr.responseText); //<p style="color:#800080">恶魔 对 大家 微笑 说:好久不见了啊(22:05:35)</p> var s = ""; for(var i=0; i<jn_info.length; i++){ s += "<p style='color:"+jn_info[i].color+"'>"+jn_info[i].sender+" 对 "; s += jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说:"; s += jn_info[i].msg+"("+jn_info[i].add_time+")</p>"; //把已经获取的最大id值赋予给maxID maxID = jn_info[i].id; } var hm =document.getElementById('show_msg'); hm.innerHTML += s; //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条:css: height:327px; overflow:auto;) hm.scrollTop = hm.scrollHeight; //滚动条始终在最下方。scrolltop表示滚动条卷起的高度,scrollheight是整个div的高度。 } } xhr.open('get','./data.php?maxID='+maxID); xhr.send(null); } //页面加载完毕就要显示最新聊天消息 window.onload = function(){ //每间隔2s就执行一次 setInterval("showmsg()",2000); } </script> <style type="text/css"> </style> </head> <body> <div id="main"> <div id="left"> <h2>在线名单:(5人)</h2> <ul id="user"> <li>帅哥:恶魔</li> <li>靓妹:甜甜</li> <li>帅哥:诸葛</li> <li>帅哥:成就梦想</li> <li>靓妹:郁金香</li> </ul> <ul id="anniu"> <li><input type="button" value="刷新名单" ></li> <li><input type="button" value="刷新屏幕" ></li> <li><input type="button" value="退出聊天" ></li> </ul> </div> <div id="right"> <div id="content"> <h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2> <hr /> <div id="show_msg"> <p style="color:red">PHP爱好者聊天室公告:欢迎恶魔来到聊天室(22:05:35)</p> <p>恶魔 对 大家 微笑 说:对啊(22:05:35)</p> <p>恶魔 对 大家 微笑 说:对啊(22:05:35)</p> <p style="color:#800080">恶魔 对 大家 微笑 说:好久不见了啊(22:05:35)</p> <p style="color:red">PHP爱好者聊天室公告:欢迎天使来到聊天室(22:05:35)</p> <p>天使 对 大家 微笑 说:你来了啊(22:05:35)</p> </div> </div> <div id="send"> <form> <div id="control"> 颜色: <select id="color" name="color"> <option value="">请选择</option> <option style="color:#FF8888" value="#FF8888">爱的暗示</option> <option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option> <option style="color:#0000FF" value="#0000FF">碧空蓝天</option> <option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option> <option style="color:#000088" value="#000088 ">蔚蓝海洋</option> <option style="color:#77FFEE" value="#77FFEE">清清之蓝</option> <option style="color:#4400B3" value="#4400B3">发亮篮紫</option> <option style="color:#A500CC" value="#A500CC">紫的拘谨</option> <option style="color:#B088FF" value="#B088FF">卡其制服</option> <option style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option> <option style="color:#DC143C" value="#DC143C">卡布其诺</option> <option style="color:#A52A2A" value="#A52A2A">苦涩心红</option> <option style="color:#FF0000" value="#FF0000">正宗喜红</option> <option style="color:#990099" value="#990099">红的发紫</option> <option style="color:#FF0000" value="#FF0000">红旗飘飘</option> <option style="color:#D2691E" value="#D2691E ">黄金岁月</option> <option style="color:#800080" value="#800080">紫金绣贴</option> <option style="color:#006400" value="#006400">橄榄树绿</option> <option style="color:#000000" value="#000000">绝对黑色</option> </select> 表情: <select id="biaoqing" name="biaoqing"> <option value="">请选择</option> <option value="笑着">笑着</option> <option value="高兴地">高兴地</option> <option value="含情脉脉">含情脉脉</option> <option value="微笑">微笑</option> <option value="幸福">幸福</option> <option value="有点脸红">有点脸红</option> <option value="使劲安慰">使劲安慰</option> <option value="自言自语">自言自语</option> <option value="差点要哭">差点要哭</option> <option value="嚎啕大哭">嚎啕大哭</option> <option value="一把鼻涕">一把鼻涕</option> <option value="很无辜">很无辜</option> <option value="流口水">流口水</option> <option value="神秘兮兮">神秘兮兮</option> <option value="幸灾乐祸">幸灾乐祸</option> <option value="很不服气">很不服气</option> <option value="不怀好意">不怀好意</option> <option value="拳打脚踢">拳打脚踢</option> <option value="不知所措">不知所措</option> <option value="翻箱倒柜">翻箱倒柜</option> <option value="很遗憾">很遗憾</option> <option value="很严肃">很严肃</option> <option value="善意警告">善意警告</option> <option value="正气凛然">正气凛然</option> <option value="哈欠连天">哈欠连天</option> <option value="小声的">小声的</option> <option value="大声的">大声的</option> <option value="尖叫一声">尖叫一声</option> <option value="遗憾的">遗憾的</option> <option value="无精打采">无精打采</option> <option value="想吐">想吐</option> <option value="真诚">真诚</option> <option value="不好意思">不好意思</option> <option value="扭捏的">扭捏的</option> <option value="腼腆的">腼腆的</option> <option value="很诧异">很诧异</option> <option value="依依不舍">依依不舍</option> </select> 聊天对象: <select id="receiver" name="receiver"> <option value="">所有的人</option> <option value="恶魔">恶魔</option> <option value="甜甜">甜甜</option> <option value="诸葛">诸葛</option> <option value="成就梦想">成就梦想</option> <option value="郁金香">郁金香</option> </select> <br /> <textarea id="msg" name="msg"></textarea> <input type="button" value="发送" onclick="sendmsg()" /> <span id="result"></span> </div> </form> </div> </div> </div> </body> </html> <script type="text/javascript"> function sendmsg(){ //发表聊天消息 FormData+Ajax合作 var fm = document.getElementsByTagName('form')[0]; var fd = new FormData(fm); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ document.getElementById('result').innerHTML = xhr.responseText; //表单域信息归位 document.getElementById('color').value=""; document.getElementById('biaoqing').value=""; document.getElementById('receiver').value=""; document.getElementById('msg').value=""; //"留言成功"标志归位,2s后归位 setTimeout("guiflag()",2000); } } xhr.open('post','./send.php'); xhr.send(fd); } //"留言成功"标志归位 function guiflag(){ document.getElementById('result').innerHTML = ""; } </script>
data.php(后端,从数据库获取所有聊天信息):
<?php //随时获取最新的聊天消息 $link = mysql_connect('localhost','root','123456'); mysql_select_db('shop0811',$link); mysql_query('set names utf8'); $maxID = $_GET['maxID']; //获取聊天消息,根据maxID做限制查询获取(避免获取重复消息) $sql = "select * from message where id>".$maxID; $qry = mysql_query($sql); $info = array(); while($rst = mysql_fetch_assoc($qry)){ $info[] = $rst; } //把数据组织为二维数组 //把最新的聊天信息通过json格式提供出来 echo json_encode($info);
send.php(后端,将发送的聊天记录存入数据库):
<?php //发表聊天消息,服务器端 $link = mysql_connect('localhost','root','123456'); mysql_select_db('shop0811',$link); mysql_query('set names utf8'); $msg = $_POST['msg']; $receiver = $_POST['receiver']; $color = $_POST['color']; $biaoqing = $_POST['biaoqing']; $sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',now())"; if(mysql_query($sql)){ echo "发表留言成功!"; }else{ echo "发表留言失败!"; }
talk.css(引入的外部CSS文件):
* {margin:0;padding:0;border:0;} #main {width:900px; height:500px; background:pink; margin:auto; margin-top:10px;} #left {width:200px; height:500px;background:#F5DEB3; float:left;} #right {width:700px; height:500px; background:rgb(206,263,49); float:left;} #content {height:379px; padding-top:1px;} #send {height:120px; background:rgb(51,175,234);} #control {position:relative; left:75px; top:18px;} select,textarea {border:1px solid gray;} #msg {width:410px;height:52px; margin-top:5px;} #content-title{color:green;font-size:14px;width:245px;margin:10px auto;} hr {border:1px solid gray; width:600px; margin:auto;} #show_msg {width:600px; margin-left:47px;margin-top:10px;font-size:14px;font-weight:bold; height:327px; overflow:auto; } #left h2 {color:#8B4513;font-size:14px;position:relative; left:36px;top:24px; width:150px; } #left #user { position:relative; top:46px;left:48px; } ul {font-size:12px; list-style:none; width:110px; } #anniu {margin-top:280px; margin-left:50px; } #anniu input {margin-top:3px; width:98px;height:30px; background:#CD853F; color:white; border:2px solid white;}
相关推荐:
以上就是PHP Ajax搭建简易聊天室的详细内容,更多请关注php中文网其它相关文章!
已抢26629个
抢已抢14077个
抢已抢7081个
抢已抢8590个
抢已抢17517个
抢已抢7030个
抢