<html> <head> <title>聊天室</title> <meta charset="utf-8"/> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <ｓｃｒｉｐｔ src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ｓｃｒｉｐｔ> <link href="./css/style.css" rel="stylesheet"/> <ｓｃｒｉｐｔ> var maxid = 0; function showmessage() { //创建ajax对象 var xhr = new XMLHttpRequest(); //监听 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { ｅｖａｌ("var info=" + xhr.responseText); var text = ""; for (var i = 0; i < info.length; i++) { text += "<p class='alert alert-success'>" + "<span class='name'>" + info[i].send + ":</span>" + "<span class='message'>" + info[i].content + "</span>" + "<span>(" + info[i].time + ")</span>" + "</p>"; maxid = info[i].id; } var old = document.getElementById("msg").innerHTML; document.getElementById("msg").innerHTML = old + text; document.getElementById("msg").scrollTop = document.getElementById("msg").scrollHeight; } }; //初始化 xhr.open("get", "./action.php?maxid=" + maxid); //发送 xhr.send(); } $(document).ready( function () { showmessage() self.setInterval("showmessage()", 2000); } ); function send() { var postData ="content="+document.getElementById('content').value; var xhr = new XMLHttpRequest(); xhr.open("POST", "./add.php", true); //一定要写头信息不然服务器接收不到 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function () { var XMLHttpReq = xhr; if (XMLHttpReq.readyState == 4) { if (XMLHttpReq.status == 200) { document.getElementById('content').value=""; } } }; xhr.send(postData); } </ｓｃｒｉｐｔ> </head> <body> <p class="panel panel-default" id="main"> <!--聊天室名字--> <p class="panel-heading"> <h3 class="panel-title"> 匿名者聊天室 </h3> </p> <!--聊天室名字--> <!--聊天室消息框--> <p class="panel-body "> <p class="well no-bottom "> <!-- 消息框样式--> <!-- <p class="alert alert-success">成功！很好地完成了提交。</p> <p class="alert alert-info">信息！请注意这个信息。</p> <p class="alert alert-warning">警告！请不要提交。</p> <p class="alert alert-danger">错误！请进行一些更改。</p> --> <p id="msg" class="showmessage"> </p> <!--聊天室消息框--> <p class="well" > <form role="form"> <p class="form-group"> <label for="name">发送消息</label> <textarea class="form-control" id="content" name="content" style="resize: none;font-family: Microsoft YaHei;" rows="3" > </textarea> </p> <p style="text-align: right"> <button type="button" class="btn btn-primary" onclick="send()"> <span class="glyphicon glyphicon-envelope"></span> 发送 </button> </p> </form> </p> <!--聊天室发送框--> </p> </p> </p> </body></html> 2. [文件] action.php ~ 367B 下载(0) 跳至 [1] [2] [3] [4] [全屏预览]
<?php$link = mysqli_connect('localhost', 'root', '123', 'test');mysqli_query($link, 'set names utf8');$info= array();header("Content-type: text/html; charset=utf-8");$id=$_GET['maxid'];$data = mysqli_query($link, "ｓｅｌｅｃｔ * from talk where id>$id");while ($array = mysqli_fetch_assoc($data)) { $info[] = $array;}; echo json_encode($info); 3. [文件] chat.sql ~ 424B 下载(0) 跳至 [1] [2] [3] [4] [全屏预览]
ｄｒｏｐ TABLE IF EXISTS `talk`;CREATE TABLE `talk` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id', `send` varchar(10) CHAracTER SET utf8 DEFAULT NULL COMMENT '发送者昵称', `ip` varchar(12) CHARACTER SET utf8 DEFAULT NULL, `content` varchar(500) CHARACTER SET utf8 DEFAULT NULL, `time` varchar(50) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=52 DEFAULT CHARSET=utf8;
4. [文件] add.php ~ 459B 下载(0) 跳至 [1] [2] [3] [4] [全屏预览]
<?php/** * @功能 将表单插入数据库 */$content=$_POST['content'];print_r($_POST);$time= date("Y-m-d H:i:s", time(0));$link = mysqli_connect('localhost', 'root', '123', 'test');mysqli_query($link, 'set names utf8');$ip = $_SERVER["REMOTE_ADDR"];$sql="ｉｎｓｅｒｔ INTO talk VALUES(NULL,'匿名者','$ip','$content','$time')";$data = mysqli_query($link,$sql);echo "$content";if($data) echo "1"; else echo "0";
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）