How to chat send a message using ajax, so that the page is not overloaded. Here is the chat code and the message is processed in it. There is also ajax, but it does not work. Where is the mistake? Here is chat.php
<?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("Ymd 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> DB is working. all right, just ajax problem.
