简体   繁体   English

如何在数据库中检索和插入MySQL数据 <div> 使用PHP和JQuery AJAX标记?

[英]How to retrieve and insert MySQL data in a <div> tag using PHP and JQuery AJAX?

I'm currently trying to create a chat website which takes inputs from the user and displays it in the chat box above the input box so that everyone connected to the website can see it, but I need this to happen using AJAX so that the page does not need to be refreshed each time 我目前正在尝试创建一个聊天网站,该网站会接受用户的输入并将其显示在输入框上方的聊天框中,以便连接到该网站的每个人都可以看到它,但是我需要使用AJAX进行操作,以便该页面不需要每次都刷新

I am very new to backend web development and so I am very sorry if this is a bad question, I have the following code so far but it doesn't seem to work whenever I run it: 我对后端Web开发非常陌生,因此,如果这是一个不好的问题,我感到非常抱歉,到目前为止,我有以下代码,但是每次运行它似乎都不起作用:

Debate.php: Debate.php:

<?php
session_start();
$message = '';
$user = ($_SESSION['sessionUsername']);
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    $connect = new mysqli('localhost', 'root', '', 'chatBase');
    $message = mysqli_escape_string($connect, $_POST['message']);
    $message_query = "INSERT INTO chatlog (user, message) VALUES('$user', '$message')"; //Inserts the message and username into the database//
    mysqli_query($connect, $message_query);
}
?>
<html>
    <head>
        <title>Debate</title>
        <link rel=stylesheet href=styles.css>
        <h1 class="indexTitle">Headline</h1>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            function retrieveMessages() {
                $.get("./read.php", function(data) {    //executes the PHP code written in the 'read.php' file//
                    $chatbox.html(data);    //inserts the fetched data into the div with the id 'chatbox'//
                });
            }

            setInterval(function() {
                retrieveMessages();     //executes the 'retrieveMessages' function every second//
            }, 1000;
        </script>
    </head>
    <body>
        <div class="textBoxSquare" id="chatbox"></div>
        <form class="form-inline" action="Debate.php" method="post">
            <input class="textBoxInput" type="text" name="message" id="message">
            <input class="textBoxSubmit" type="submit" value="Submit">
        </form>
    </body>
</html>

read.php: read.php:

<?php
$connect = new mysqli('localhost', 'root', '', 'chatBase');
$query="SELECT * FROM chatlog ORDER BY messageID ASC";
mysqli_query($connect, $query);
$res = $db->use_result();
while ($row = $res->fetch_assoc()) {
    $username=$row["user"];
    $text=$row["message"];
    echo "<p>$user: $message</p>\n";
}
?>

Replace your script with this: 用以下内容替换脚本:

function retrieveMessages() {
    $.get("./read.php", function(data) {
        var data = JSON.parse(data); //Parses the data from jquery to a variable.
        document.getElementById("chatbox")[0].innerHTML = data; //Sets the variable to the innerHTML of that DIV ID.
    });
}
setInterval(function() {
    retrieveMessages();
}, 1000;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM