当前位置：首页 → 问答吧 → 用jquery写了一个超简陋的ajax无刷新聊天室

用jquery写了一个超简陋的ajax无刷新聊天室

时间：2008-05-30

来源：互联网

现要只是实现了聊天室的基本聊天，ajax无刷新显示功能，会员功能等正在制作中。
演示地址：http://www.ye55.com/chat

下载地址：http://www.phpd.cn/show-34-1.html

sql:
CREATE TABLE `message` (
  `mid` int(20) NOT NULL auto_increment,
  `msg` varchar(255) NOT NULL,
  `user` varchar(50) NOT NULL,
  `time` int(10) NOT NULL,
  PRIMARY KEY  (`mid`),
  KEY `user` (`user`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=161 ;

CREATE TABLE `session` (
  `id` varchar(32) NOT NULL,
  `time` int(10) NOT NULL,
  `timenow` int(10) NOT NULL,
  `data` text NOT NULL,
  `ip` varchar(15) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

主要的三个页面的代码
index.php

复制PHP内容到剪贴板

PHP代码:

<?php
//程序设计：℃冻番茄 QQ:7279915 E-mail:[email protected] [url=http://www.phpd.cn]www.phpd.cn[/url]
require_once("config.php");
?>
<!DOCTYPE htm PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<HEAD>
  <TITLE> chat </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/global.css" rel="stylesheet" type="text/css" />
  <SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>
<div id="main">
<div id="main_left" style="float:none;margin:0px auto;">
  <div id="chat_m" style="width:500px;height:500px;border:#cccccc 1px solid;overflow:auto;">Loading...</div>
   <div id="main_l_from">
   <FORM METHOD=POST ACTION="javascript:void(0)">
   昵称：<INPUT TYPE="text" NAME="user" id="user" size="8" value="<?=$_SESSION['user']?>"> 内容:
   <INPUT TYPE="text" NAME="message" id="message" style="width:250px;"> <INPUT TYPE="submit" name="sub" value="发言" id="sub">
   </div></FORM>
</div>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<hr size=1>
<center>程序设计：℃冻番茄 QQ:7279915 E-mail:[email protected] <a href="[url=http://www.phpd.cn]http://www.phpd.cn">[url]www.phpd.cn[/url]</a[/url]> </center>

chat.php

复制PHP内容到剪贴板

PHP代码:

<?php
require_once("config.php");
//程序设计：℃冻番茄 QQ:7279915 E-mail:[email protected] [url=http://www.phpd.cn]www.phpd.cn[/url]
$fist=$db->getfirst("select `mid` from `message` order by `mid` desc ");
$mid=$fist['mid']-40; //初始化聊天记录条数
$mid=$mid<=0?0:$mid;
$mid=0;
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="contents"></div>
<INPUT TYPE="text" style="display:none" NAME="mid" id="hide_mid" value="<?=$mid?>">
  <div id="end" style="width:400px;display:none;clear:both;"></div>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>

ajax.php

复制PHP内容到剪贴板

PHP代码:

<?php
require_once("config.php");
////程序设计：℃冻番茄 QQ:7279915 E-mail:[email protected] [url=http://www.phpd.cn]www.phpd.cn[/url]
//发信息
if($_GET['act']=='send'){
$msg=$_POST['msg'];
$user=$_POST['user'];
if(empty($msg) || empty($user)){
  $return['msg']='聊天内容或昵称不能为空';
}else{
  $time=time();
  if($db->insert("insert into `message` (`msg`,`user`,`time`) values ('$msg','$user','$time')")){
   $return['msg']=true;
  }else{
   $return['msg']="err";
  }
}
echo json_encode($return);
}elseif($_GET['act']=='display'){
if(isset($_POST['mid'])){
  $s=" where `mid`>'".$_POST['mid']."' ";
}else{
  $s='';
}
$sql="select * from `message` $s order by `mid`";
$total=$db->getcount($sql);
if($total==0){
  $a=0;
}else{
  $result=$db->query($sql);
  while($row=$db->getarray($result)){
   $row['time1']=date('Y-m-d H:i:s',$row['time']);
   $a[]=$row;
   $b=$row['mid'];
  }
}
$ccc=array('list'=>$a,'mid'=>$b);
echo json_encode($ccc);
}
?>

作者: dmkf 发布时间: 2008-05-30

鼓励一下。