TShopping

 找回密碼
 註冊
搜索
查看: 138|回復: 0

[分享] jquery+ajax+php實現聊天室,結果打字回車後聊天室面板沒有...

[複製鏈接]
發表於 2019-6-29 11:34:13 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
一、demo1.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>聊天室</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <style type="text/css">
  7.         body{
  8.            margin:0;
  9.            padding:0;
  10.            font-size:12px;
  11.         }
  12.         #messagewindow {
  13.             height: 250px;
  14.             border: 1px solid;
  15.             padding: 5px;
  16.             overflow: auto;
  17.         }
  18.         #wrapper {
  19.             margin: auto;
  20.             width: 438px;
  21.         }
  22.     </style>
  23. <!--   引入jQuery -->
  24. <script src="scripts/jquery.js" type="text/javascript"></script>
  25. <script type="text/javascript">
  26. //<![CDATA[
  27.     $(function(){
  28.         //定义时间戳
  29.         timestamp = 0;
  30.         //调用更新信息函数
  31.         updateMsg();
  32.         //表单提交
  33.         $("#chatform").submit(function(){
  34.             $.post("backend.php",{
  35.                         message: $("#msg").val(),
  36.                         name: $("#author").val(),
  37.                         action: "postmsg",
  38.                         time: timestamp
  39.                     }, function(xml) {
  40.                 //清空信息文本框内容
  41.                 $("#msg").val("");
  42.                 //调用解析xml的函数
  43.                 addMessages(xml);
  44.             });
  45.             return false; //阻止表单提交
  46.         });
  47.     });
  48.     //更新信息函数,每隔一定时间去服务端读取数据
  49.     function updateMsg(){
  50.         $.post("backend.php",{ time: timestamp }, function(xml) {
  51.             //移除掉 等待提示
  52.             $("#loading").remove();
  53.             //调用解析xml的函数
  54.             addMessages(xml);
  55.         });
  56.          //每隔4秒,读取一次.
  57.         setTimeout('updateMsg()', 4000);
  58.     }
  59.     //解析xml文档函数,把数据显示到页面上
  60.     function addMessages(xml) {
  61.         //如果状态为2,则终止
  62.         if($("status",xml).text() == "2") return;
  63.         //更新时间戳
  64.         timestamp = $("time",xml).text();
  65.         //$.each循环数据
  66.         $("message",xml).each(function() {
  67.             var author = $("author",this).text(); //发布者
  68.             var content = $("text",this).text();  //内容
  69.             var htmlcode = "<strong>"+author+"</strong>: "+content+"<br />";
  70.             $("#messagewindow").prepend( htmlcode ); //添加到文档中
  71.         });
  72.     }
  73. //]]>
  74. </script>

  75. </head>
  76. <body>

  77. <div id="wrapper">
  78.     <p id="messagewindow"><span id="loading">加载中...</span></p>
  79.     <form id="chatform" action="#">
  80.         姓名: <input type="text" id="author" size="50"/><br />
  81.         内容: <input type="text" id="msg"  size="50"/>   <br />
  82.         <input type="submit" value="发送" /><br />
  83.     </form>
  84. </div>

  85. </body>
  86. </html>
複製代碼
二、backend.php
  1. <?php
  2. // 配置信息:
  3. // 1,数据库连接的具体信息
  4. // 2,我们要存储的消息的数目
  5. // 3,用户进到聊天室的时候消息显示的数目
  6. $dbhost = "localhost";
  7. $dbuser = "root";
  8. $dbpass = "root";
  9. $dbname = "chat";
  10. $store_num = 10;
  11. $display_num = 10;

  12. // 错误报告
  13. error_reporting(E_ALL);

  14. // 头部信息
  15. header("Content-type: text/xml");
  16. header("Cache-Control: no-cache");

  17. //连接mysql
  18. $dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
  19. mysql_select_db($dbname,$dbconn);

  20. //为容易操作请求数据,我们为请求中的每个参数设置一个变量,每个变量将把请求中的参数值作为其自己的值
  21. //foreach语句遍历所有的POST数据,并且为每个参数创建一个变量,并且给它赋值
  22. foreach($_POST as $key => $value){
  23.     $key = mysql_real_escape_string($value, $dbconn);
  24. }

  25. //屏敝任何错误提示,判断action是否等于 postmsg
  26. if(@$action == "postmsg"){
  27.     //插入数据
  28.     mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
  29.                  VALUES ('$name','$message',".time().")",$dbconn);
  30.     //删除数据(因为我们默认值存储10条数据)
  31.     mysql_query("DELETE FROM messages WHERE id <= ".
  32.                 (mysql_insert_id($dbconn)-$store_num),$dbconn);
  33. }

  34. //查询数据
  35. $messages = mysql_query("SELECT user,msg
  36.                          FROM messages
  37.                          WHERE time>$time
  38.                          ORDER BY id ASC
  39.                          LIMIT $display_num",$dbconn);
  40. //是否有新记录
  41. if(mysql_num_rows($messages) == 0) $status_code = 2;
  42. else $status_code = 1;

  43. //返回xml数据结构
  44. echo "<?xml version=\"1.0\"?>\n";
  45. echo "<response>\n";
  46. echo "\t<status>$status_code</status>\n";
  47. echo "\t<time>".time()."</time>\n";
  48. if($status_code == 1){ //如果有记录
  49.     while($message = mysql_fetch_array($messages)){
  50.         $message['msg'] = htmlspecialchars(stripslashes($message['msg']));
  51.         echo "\t<message>\n";
  52.         echo "\t\t<author>$message[user]</author>\n";
  53.         echo "\t\t<text>$message[msg]</text>\n";
  54.         echo "\t</message>\n";
  55.     }
  56. }
  57. echo "</response>";
  58. ?>
複製代碼
三、demo.xml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <response>
  3. <status>1</status>
  4. <time>1170323512</time>
  5. <message>
  6.    <author>邓大奶</author>
  7.    <text>等我</text>
  8. </message>
  9. <message>
  10.    <author>陈师妹</author>
  11.    <text>你是大神!</text>
  12. </message>
  13. </response>
複製代碼
四、sql.sql
  1. CREATE TABLE `messages` (
  2.   `id` int(7) NOT NULL auto_increment,
  3.   `user` varchar(255) NOT NULL,
  4.   `msg` text NOT NULL,
  5.   `time` int(9) NOT NULL,
  6.   PRIMARY KEY  (`id`)
  7. );
複製代碼


經過測試後發現backend.php內的


  1. if(@$action == "postmsg"){
複製代碼
無法判斷
解決方法
等待處裡中


文章出處


 

臉書網友討論

本帖子中包含更多資源

您需要 登錄 才可以下載或查看,沒有帳號?註冊

x
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2019-10-22 18:34 , Processed in 0.058220 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表