Question

如何在聊天中使用ajax发送消息，以使页面不会超载。这是聊天代码，并在其中处理消息。也有ajax，但是不起作用。错误在哪里？这是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("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>

数据库工作正常，我可以发送和接收消息。没问题。

用ajax发送消息

0 个答案: