jquery+ajax+php實現聊天室，結果打字回車後聊天室面板沒有...
一、demo1.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>聊天室</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
}
#messagewindow {
height: 250px;
border: 1px solid;
padding: 5px;
overflow: auto;
}
#wrapper {
margin: auto;
width: 438px;
}
</style>
<!-- 引入jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//定义时间戳
timestamp = 0;
//调用更新信息函数
updateMsg();
//表单提交
$("#chatform").submit(function(){
$.post("backend.php",{
message: $("#msg").val(),
name: $("#author").val(),
action: "postmsg",
time: timestamp
}, function(xml) {
//清空信息文本框内容
$("#msg").val("");
//调用解析xml的函数
addMessages(xml);
});
return false; //阻止表单提交
});
});
//更新信息函数，每隔一定时间去服务端读取数据
function updateMsg(){
$.post("backend.php",{ time: timestamp }, function(xml) {
//移除掉 等待提示
$("#loading").remove();
//调用解析xml的函数
addMessages(xml);
});
//每隔4秒，读取一次.
setTimeout('updateMsg()', 4000);
}
//解析xml文档函数，把数据显示到页面上
function addMessages(xml) {
//如果状态为2，则终止
if($("status",xml).text() == "2") return;
//更新时间戳
timestamp = $("time",xml).text();
//$.each循环数据
$("message",xml).each(function() {
var author = $("author",this).text(); //发布者
var content = $("text",this).text();//内容
var htmlcode = "<strong>"+author+"</strong>: "+content+"<br />";
$("#messagewindow").prepend( htmlcode ); //添加到文档中
});
}
//]]>
</script>
</head>
<body>
<div id="wrapper">
<p id="messagewindow"><span id="loading">加载中...</span></p>
<form id="chatform" action="#">
姓名： <input type="text" id="author" size="50"/><br />
内容： <input type="text" id="msg"size="50"/> <br />
<input type="submit" value="发送" /><br />
</form>
</div>
</body>
</html>二、backend.php
<?php
// 配置信息：
// 1,数据库连接的具体信息
// 2,我们要存储的消息的数目
// 3,用户进到聊天室的时候消息显示的数目
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "root";
$dbname = "chat";
$store_num = 10;
$display_num = 10;
// 错误报告
error_reporting(E_ALL);
// 头部信息
header("Content-type: text/xml");
header("Cache-Control: no-cache");
//连接mysql
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$dbconn);
//为容易操作请求数据,我们为请求中的每个参数设置一个变量,每个变量将把请求中的参数值作为其自己的值
//foreach语句遍历所有的POST数据,并且为每个参数创建一个变量,并且给它赋值
foreach($_POST as $key => $value){
$key = mysql_real_escape_string($value, $dbconn);
}
//屏敝任何错误提示,判断action是否等于 postmsg
if(@$action == "postmsg"){
//插入数据
mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
VALUES ('$name','$message',".time().")",$dbconn);
//删除数据(因为我们默认值存储10条数据)
mysql_query("DELETE FROM messages WHERE id <= ".
(mysql_insert_id($dbconn)-$store_num),$dbconn);
}
//查询数据
$messages = mysql_query("SELECT user,msg
FROM messages
WHERE time>$time
ORDER BY id ASC
LIMIT $display_num",$dbconn);
//是否有新记录
if(mysql_num_rows($messages) == 0) $status_code = 2;
else $status_code = 1;
//返回xml数据结构
echo "<?xml version=\"1.0\"?>\n";
echo "<response>\n";
echo "\t<status>$status_code</status>\n";
echo "\t<time>".time()."</time>\n";
if($status_code == 1){ //如果有记录
while($message = mysql_fetch_array($messages)){
$message['msg'] = htmlspecialchars(stripslashes($message['msg']));
echo "\t<message>\n";
echo "\t\t<author>$message</author>\n";
echo "\t\t<text>$message</text>\n";
echo "\t</message>\n";
}
}
echo "</response>";
?>三、demo.xml
<?xml version="1.0" encoding="UTF-8"?>
<response>
<status>1</status>
<time>1170323512</time>
<message>
<author>邓大奶</author>
<text>等我</text>
</message>
<message>
<author>陈师妹</author>
<text>你是大神!</text>
</message>
</response>四、sql.sql
CREATE TABLE `messages` (
`id` int(7) NOT NULL auto_increment,
`user` varchar(255) NOT NULL,
`msg` text NOT NULL,
`time` int(9) NOT NULL,
PRIMARY KEY(`id`)
);
經過測試後發現backend.php內的
if(@$action == "postmsg"){無法判斷
解決方法
等待處裡中
文章出處
頁:
[1]