通過ajax和setInterval()函數(shù)，配合php+mysql實(shí)現(xiàn)一個(gè)簡單的在線聊天室的功能。附帶詳細(xì)源碼案例。這個(gè)聊天室是一個(gè)簡單的聊天室，通過javascript setInterval()和ajax函數(shù)，不停的去獲取服務(wù)器獲取最新的聊天數(shù)據(jù)信息，并無刷新的寫入到前臺DOM中，來實(shí)現(xiàn)在線聊天的功能，這是一個(gè)比較笨的方法實(shí)現(xiàn)在線聊天室功能，不建議用于實(shí)際項(xiàng)目中。html代碼：

實(shí)現(xiàn)一個(gè)簡單的在線聊天室功能

在線聊天

.chats?{?width:100%;max-height:295px;min-height:200px;?height:auto;?overflow-y:auto;?}

.chatbtn?{?width:100%;?padding:10px?10px;?border-top:1px?dashed?#000;}

.chats?.chatlist?{?width:100%;?padding:10px?10px;?min-height:24px;?line-height:1.2;?font-size:13px;?text-align:left;?}

.chats?.chatlist?.chattit?{??font-size:14px;?}

.chats?.chatlist?.chattit?span?{?margin-right:2px;?}

.chats?.chatlist?.chatcon?{?font-size:13px;?padding-left:10px;?margin-top:6px;text-decoration:?underline;}

發(fā)送

//js聊天代碼

$(function(){

//獲取聊天數(shù)據(jù)

setInterval(function(){

var?star?=?$('#datachat').attr('data_num');

//判斷是不是第一次加載，如果是第一次加載直接獲取數(shù)據(jù)庫最新的數(shù)據(jù)

//如果不是第一次加載，就不停的去獲取服務(wù)器的最新聊天數(shù)據(jù)

if(star=='load'){

$.ajax({

url:'inc/chat.php?type=get_def',

type:'post',

cache:false,

dataType:'json',

success:function(data){

if(data?!='error!'){

var?clength?=?data.length-1;

for(var?i=clength;i>=0;i--){

$(".chats").append("

"+data[i].name+""+data[i].addtime+"["+data[i].address+"]:"+data[i].content+"");

$('#datachat').attr('data_num',data[i].id);

$(".chats").animate({scrollTop:$('.chats')[0].scrollHeight},2000);

}

}

}

});

}else{

$.ajax({

url:'inc/chat.php?type=get_new',

type:'post',

cache:false,

dataType:'json',

data:{

'num':star

},

success:function(data){

if(data?!='error!'){

var?clength?=?data.length-1;

for(var?i=clength;i>=0;i--){

$(".chats").append("

"+data[i].name+""+data[i].addtime+"["+data[i].address+"]:"+data[i].content+"");

$('#datachat').attr('data_num',data[i].id);

$(".chats").animate({scrollTop:$('.chats')[0].scrollHeight},700);

}

}

}

});

}

},1500);

//發(fā)送聊天數(shù)據(jù)

$('#chat_send').click(function(){

var?chat_name?=?$('#name').val();

var?chat_con?=?$('#con').val();

if(chat_name==''){

$('#name').val('昵稱不可以為空！');

return?false;

}else?if(chat_name=='昵稱不可以為空！'){

$('#name').val('?');

return?false;

}else?if(chat_name.length<1){

$('#name').val('昵稱太短!');

return?false;

}else?if(chat_name=='昵稱太短!'){

$('#name').val('?');

return?false;

}

if(chat_con==''){

$('#con').val('內(nèi)容不可以為空！');

return?false;

}else?if(chat_con=='內(nèi)容不可以為空！'){

$('#con').val('?');

return?false;

}else?if(chat_con.length<1){

$('#con').val('內(nèi)容太短!');

return?false;

}else?if(chat_con=='內(nèi)容太短!'){

$('#con').val('?');

return?false;

}

$.ajax({

url:'inc/chat.php?type=send',

type:'post',

cache:false,

dataType:'text',

data:{

'name':chat_name,

'con':chat_con

},

success:function(data){

if(data=='發(fā)送成功！'){

$('#chat_send').text('發(fā)送成功');

}else{

$('#chat_send').text('發(fā)送失敗');

}

setTimeout(function(){

$('#chat_send').text('發(fā)送');

},1000);

},

error:function(){

alert('請求出錯(cuò)！');

}

});

});

});

php數(shù)據(jù)處理代碼 chat.php：<?php

header("Conten-type:text/html;charset=utf-8");

require('../config.php');

require('getip.php');

if(?$_SERVER['REQUEST_METHOD']?==?"POST"?)?{

if?($_GET['type']?==?'send')?{

//添加聊天數(shù)據(jù)

$name?=?htmlspecialchars(addslashes(trim($_POST['name'])));

$con?=?htmlspecialchars(addslashes(trim($_POST['con'])));

if?(empty($name)?||?empty($con))?{

echo?"信息填寫不完整。";

exit;

}?else?{

$ip?=?GetIpFrom();

$ips?=?$ip[0]?.'-'.?$ip[1];

if($dbh->exec("insert?into?chat?(name,content,addtime,address)?values('$name','$con',now(),'$ips')")>0){

echo?'發(fā)送成功！';

exit;

}else{

echo?'發(fā)送失敗！';

exit;

}

}

}else?if?($_GET['type']?==?'get_def'){

//獲取數(shù)據(jù)

$res?=?$dbh->query("SELECT?*?FROM?chat?ORDER?BY?id?DESC?LIMIT?10");

$res?=?$res->fetchAll();

if($res){

echo?json_encode($res);

exit;

}else{

echo?'error!';

exit;

}

}else?if($_GET['type']?==?'get_new'){

$num?=?intval($_POST['num']);

$sql1?="SELECT?*?FROM?chat?WHERE?id>{$num}?ORDER?BY?id?DESC";

$res1?=?$dbh?->?query($sql1);

$res2?=?$res1->fetchAll();

if($res2){

echo?json_encode($res2);

exit;

}else{

echo?'error!';

exit;

}

}

}

?>mysql數(shù)據(jù)庫結(jié)構(gòu)：CREATE?TABLE?IF?NOT?EXISTS?`chat`?(

`id`?int(8)?NOT?NULL?AUTO_INCREMENT?COMMENT?'id',

`name`?char(10)?NOT?NULL?COMMENT?'昵稱',

`content`?varchar(255)?NOT?NULL?COMMENT?'內(nèi)容',

`addtime`?datetime?NOT?NULL?COMMENT?'發(fā)布時(shí)間',

`address`?varchar(80)?DEFAULT?'未知'?COMMENT?'ip地址',

PRIMARY?KEY?(`id`)

)?ENGINE=InnoDB??DEFAULT?CHARSET=utf8?COMMENT='在線聊天'?AUTO_INCREMENT=3?;

ajax+php簡單聊天室源碼下載：

總結(jié)

以上是生活随笔為你收集整理的php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。