How to send a message using ajax in chat, so that the page is not overloaded. Here is the chat code and the message is processed in it. There's also ajax, but it doesn't work. Where is the mistake? Here is chat.php code:
<?php
session_start();
$user_id = $_SESSION['user_id'];
if(isset($_POST['exit'])) {
session_destroy();
header("Location: login.html");
exit;
}
include 'db_chat.php';
// header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Chat</title>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<style>
input{font:12px arial} a{color:#00f;text-decoration:none} a:hover{text-decoration:underline} #wrapper,#loginform{margin:0 auto;padding-bottom:25px;background:#ebf4fb;width:504px;border:1px solid #acd8f0}#loginform{padding-top:18px}#loginform p{margin:5px} .chatbox{text-align:left;margin:0 auto;margin-bottom:25px;padding:10px;background:#fff;height:270px;width:430px;border:1px solid #acd8f0;overflow:auto} #usermsg{width:380px;height:50px;border:1px solid #acd8f0;border-radius:3px 3px 3px 3px}#submitmsg{width:70px;height:53px;border-radius:5px 5px 5px 5px;cursor:pointer}.error{color:#f00} #menu{padding:12.5px 25px 12.5px 25px;} .welcome{float:left} .logout{float:right} .msgln{margin:0 0 2px 0}.profile{position:absolute;right:100px;top:10px;width:280px;height:450px;border:1px solid black;border-radius:5px 5px 5px 5px;box-shadow:2px 2px 2px 2px; overflow: scroll;}
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome" style="font-family: 'Lobster', cursive; font-size:1.1em;">Welcome, <?php echo $_SESSION['email-e']?><b></b></p><br>
<h3 style="cursor:pointer; position:absolute;float:left;text-decoration:none; color:black;">
<a href="profile.php?id=<?= $user_id;?>" style="color:#3661A2; text-decoration:none; font-style: oblique;">View my profile</a></h3>
<form name="message" action="" method="post">
<p class="logout" name="logout">
<button name="exit" id="exit" href="login.php" style="cursor:pointer; border-radius:3px 3px 3px 3px; color:red;">Exit Chat</button>
</p>
</form>
<div style="clear:both"></div>
</div>
<div class="chatbox">
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function() {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: "chat.php",
data: form_data,
success: function() {
alert("Ваше сообщение отпрвлено!");
});
});
});
</script>
<?php
if(isset($_POST['submitmsg'])) {
if(!empty($_POST['usermsg']) && is_string($_POST['usermsg'])) {
$user_id = $_SESSION['user_id'];
$time = date("Y-m-d H:i:s");
$usermsg = trim($_POST['usermsg']);
$sql_chat ="INSERT INTO users_chat (usermsg,user_id,time)
VALUES('{$usermsg}','{$user_id}','{$time}')";
$res = mysqli_query($mysqli_chat,$sql_chat);
}
}
$query_chat = "SELECT * FROM users_chat
INNER JOIN users_data
ON users_chat.user_id = users_data.id";
$res = mysqli_query($mysqli_chat,$query_chat);
while($row_chat = mysqli_fetch_array($res)) {
$user_id = $row_chat['user_id'];
print '<div>';
echo 'Email:'.$row_chat['email'].'<br>';
print 'Time:'.' '.$row_chat['time'].'<br>';
print htmlspecialchars($row_chat['usermsg']).'<br><br>';
print '</div>';
}
?>
</div>
<form name="message" action="" method="post" id="myform">
<input name="usermsg" type="text" id="usermsg" style="margin-left:25px;">
<input name="submitmsg" type="submit" id="submitmsg" style="cursor:pointer; color:green;" value="Send" /><br>
<div class="profile" style="cursor:pointer">
<h3 style="color:green; margin-top:0;">All users</h3>
<?php
include 'db.php';
$id = $row_chat['user_id'];
$query_chat = "SELECT * FROM users_data";
$res = mysqli_query($mysqli,$query_chat);
while($row_chat = mysqli_fetch_array($res)) {
?>
<i><b>Username</b></i>:<a href="profile.php?id=<?=$row_chat['id']?>"><?=$row_chat['email']?></a><br>
<?php
}
?>
</div>
</form>
</div>
<form>
</form>
</body>
</html>
DataBase works clearly and I can send and receive my messages. There are no problems with it.