Springe zu
[1]
[2]
[3]
[4]
[Vollbildvorschau]
<html>
<head>
<title>聊天室</title>
<meta charset="utf-8"/>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="./css/style.css" rel="stylesheet"/>
<script>
var maxid = 0;
function showmessage() {
//创建ajax对象
var xhr = new XMLHttpRequest();
//监听
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
eval("var info=" + xhr.responseText);
var text = "";
for (var i = 0; i < info.length; i++)
{
text += "<div class='alert alert-success'>" +
"<span class='name'>" + info[i].send + ":</span>" +
"<span class='message'>" + info[i].content + "</span>" +
"<span>(" + info[i].time + ")</span>" +
"</div>";
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);
}
</script>
</head>
<body>
<div class="panel panel-default" id="main">
<!--聊天室名字-->
<div class="panel-heading">
<h3 class="panel-title">
匿名者聊天室
</h3>
</div>
<!--聊天室名字-->
<!--聊天室消息框-->
<div class="panel-body ">
<div class="well no-bottom ">
<!-- 消息框样式-->
<!--
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>
-->
<div id="msg" class="showmessage">
</div>
<!--聊天室消息框-->
<div class="well" >
<form role="form">
<div 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>
</div>
<div style="text-align: right">
<button type="button" class="btn btn-primary" onclick="send()">
<span class="glyphicon glyphicon-envelope"></span>
发送
</button>
</div>
</form>
</div>
<!--聊天室发送框-->
</div>
</div>
</div>
</body>
</html>
2. [Datei] action.php ~ 367B Herunterladen(0) Springe zu [1] [2] [3] [4] [Vollbildvorschau]
<?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, "select * from talk where id>$id");
while ($array = mysqli_fetch_assoc($data)) {
$info[] = $array;
};
echo json_encode($info);
3. [Datei] chat.sql ~ 424B Herunterladen(0) Springe zu [1] [2] [3] [4] [Vollbildvorschau]
DROP 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. [Datei] add.php ~ 459B Herunterladen(0) Springe zu [1] [2] [3] [4] [Vollbildvorschau]
<?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="INSERT INTO talk VALUES(NULL,'匿名者','$ip','$content','$time')";
$data = mysqli_query($link,$sql);
echo "$content";
if($data)
echo "1";
else
echo "0";
Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
2 Wochen vorByDDD
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Heiße Werkzeuge
Dreamweaver CS6
Visuelle Webentwicklungstools
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
