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[user]</author>\n";
        echo "\t\t<text>$message[msg]</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

--Database "chat"

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`)
);

以上四个是全部的文件把他们都放在WAMP的www文件夹上,然后也没有创建数据库之类的其他操作,在chrome上打开后在消息框和姓名框打字点击发送后没有报错,聊天窗口也没有任何消息出来,请问这是怎么回事?

阅读 5k
6 个回答

你好!我在本地测试了下,将

error_reporting(E_ALL) 修改为error_reporting(0),
//因为mysql_connect在php7中废弃了,异步请求时候页面上回有错误提示,影响了返回数据结构

其他的看不懂,我就想知道你键盘按下事件注册了没有?

f12看下有没有报错

看network 有没有发送请求和有没有返回值咯

从你的问题里面,我看到了你对于前端问题的排查。那么你的php你保证获取到了数据了吗?获取到了数据吗?还有你可以看看network里面的请求是404还是500还是200。


如果是200,然后你看响应,如果数据结构是对的,那么就是你的回调函数有问题。

如果是404,那么就是你的路径不对,

如果是500,那么你可以看响应,里面一般来说,会有你的php代码的错误提示

对了,php如果你用的包有问题还会有403的提示,这个提示百度一下就可以解决。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏