用jquery写了一个超简陋的ajax无刷新聊天室.docx
- 文档编号:30684521
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:7
- 大小:16.10KB
用jquery写了一个超简陋的ajax无刷新聊天室.docx
《用jquery写了一个超简陋的ajax无刷新聊天室.docx》由会员分享,可在线阅读,更多相关《用jquery写了一个超简陋的ajax无刷新聊天室.docx(7页珍藏版)》请在冰豆网上搜索。
用jquery写了一个超简陋的ajax无刷新聊天室
用jquery写了一个超简陋的ajax无刷新聊天室
现要只是实现了聊天室的基本聊天,ajax无刷新显示功能,会员功能等正在制作中。
演示地址:
CREATETABLE`message`(
`mid`int(20)NOTNULLauto_increment,
`msg`varchar(255)NOTNULL,
`user`varchar(50)NOTNULL,
`time`int(10)NOTNULL,
PRIMARYKEY(`mid`),
KEY`user`(`user`)
)ENGINE=InnoDBDEFAULTCHARSET=utf8AUTO_INCREMENT=161;CREATETABLE`session`(
`id`varchar(32)NOTNULL,
`time`int(10)NOTNULL,
`timenow`int(10)NOTNULL,
`data`textNOTNULL,
`ip`varchar(15)NOTNULL,
PRIMARYKEY(`id`)
)ENGINE=MyISAMDEFAULTCHARSET=utf8;主要的三个页面的代码
index.php
[php]
<?
php
//程序设计:
℃冻番茄QQ:
7279915E-mail:
web@
require_once("config.php");
?
>
<!
DOCTYPEhtmPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http:
//www.w3.org/1999/xhtml">
<HEAD>
<TITLE>chat</TITLE>
<METANAME="Generator"CONTENT="EditPlus">
<METANAME="Author"CONTENT="">
<METANAME="Keywords"CONTENT="">
<METANAME="Description"CONTENT="">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkhref="css/global.css"rel="stylesheet"type="text/css"/>
<SCRIPTLANGUAGE="JavaScript"src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>
<divid="main">
<divid="main_left"style="float:
none;margin:
0pxauto;">
<divid="chat_m"style="width:
500px;height:
500px;border:
#cccccc1pxsolid;overflow:
auto;">Loading...</div>
<divid="main_l_from">
<FORMMETHOD=POSTACTION="javascript:
void(0)">
昵称:
<INPUTTYPE="text"NAME="user"id="user"size="8"value="<?
=$_SESSION['user']?
>">内容:
<INPUTTYPE="text"NAME="message"id="message"style="width:
250px;"><INPUTTYPE="submit"name="sub"value="发言"id="sub">
</div></FORM>
</div>
<!
--<divid="main_right">
<h2>在线会员</h2>
</div>-->
<SCRIPTLANGUAGE="JavaScript">
<!
--
$("#chat_m").load("chat.php");
$("#sub").click(function(){
if($("#user").val()==''){
alert("昵称不能为空!
");
}elseif($("#message").val()==''){
alert("聊天内容不能为空!
");
}else{
$.post("ajax.php?
act=send",{user:
$("#user").val(),msg:
$("#message").val()},function(data){
if(data.msg===true){
showmsg();
$("#message").val("");
}else{
alert(data.msg);
}
},"json")
}
})
//-->
</SCRIPT>
<hrsize=1>
<center>程序设计:
℃冻番茄QQ:
7279915E-mail:
web@<ahref="">[url]</a[/url]></center>
[/php]chat.php
[php]
<?
php
require_once("config.php");
//程序设计:
℃冻番茄QQ:
7279915E-mail:
web@
$fist=$db->getfirst("select`mid`from`message`orderby`mid`desc");
$mid=$fist['mid']-40;//初始化聊天记录条数
$mid=$mid<=0?
0:
$mid;
$mid=0;
?
>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<divid="contents"></div>
<INPUTTYPE="text"style="display:
none"NAME="mid"id="hide_mid"value="<?
=$mid?
>">
<divid="end"style="width:
400px;display:
none;clear:
both;"></div>
<SCRIPTLANGUAGE="JavaScript">
<!
--
//alert($("#hide_mid").val());
functionshowmsg(){
mids=$("#hide_mid").val();
$.post("ajax.php?
act=display",
{mid:
mids},
function(data){
//alert(data.list[2].user);
$("#hide_mid").val(data.mid);
if(data.list!
=0){
for(i=0;i<data.list.length;i++){
$("#contents").append("<br/>"+data.list.user+"说:
"+data.list.msg+" ["+data.list.time1+"]");
scrollWindow();
}
}
},"json");
}
functionscrollWindow(){scroll(0,100000);}
showmsg();
setInterval("showmsg()",4000);
//-->
</SCRIPT>[/php]ajax.php
[php]
<?
php
require_once("config.php");
////程序设计:
℃冻番茄QQ:
7279915E-mail:
web@
//发信息
if($_GET['act']=='send'){
$msg=$_POST['msg'];
$user=$_POST['user'];
if(empty($msg)||empty($user)){
$return['msg']='聊天内容或昵称不能为空';
}else{
$time=time();
if($db->insert("insertinto`message`(`msg`,`user`,`time`)values('$msg','$user','$time')")){
$return['msg']=true;
}else{
$return['msg']="err";
}
}
echo$return);
}elseif($_GET['act']=='display'){
if(isset($_POST['mid'])){
$s="where`mid`>'".$_POST['mid']."'";
}else{
$s='';
}
$sql="select*from`message`$sorderby`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-dH:
i:
s',$row['time']);
$a[]=$row;
$b=$row['mid'];
}
}
$ccc=array('list'=>$a,'mid'=>$b);
echo$ccc);
}
?
>
[/php]
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 一个 简陋 ajax 刷新 聊天室