jquery ajax聊天室

用户5760343

发布于 2019-10-10 14:33:09

1.4K0

发布于 2019-10-10 14:33:09

文章被收录于专栏：sktjsktj

image.png

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> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[

(function(){ //定义时间戳 timestamp = 0; //调用更新信息函数 updateMsg(); //表单提交

("#chatform").submit(function(){

("#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(); //

("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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.10.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html