How to retrieve and insert MySQL data in a <div> tag using PHP and JQuery AJAX?
Question
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
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:
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:
<?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";
}
?>
1 answers
solution1
0 2019-03-06 14:09:26
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.