Show sourcecode
The following files exists in this folder. Click to view.
ajax_api.php
ovn_ajax1.php
ovn_ajax2.php
ovn_ajax3.php
ovn_ajax2.php
79 lines UTF-8 Windows (CRLF)
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
<?php
// Title: AJAX 2
error_reporting(-1); // Report all type of errors
ini_set('display_errors', 1); // Display all errors
ini_set('output_buffering', 0); // Do not buffer outputs, write directly
$remote = false;
?>
<?php include("../../incl/connect_db.php"); ?>
<?php
function createTable($conn) {
$sql = "CREATE TABLE IF NOT EXISTS ajax (
id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
name varchar(255) NOT NULL,
points int NOT NULL
)";
$conn->exec($sql);
}
function addUser($conn, $name, $points) {
$sql = "INSERT INTO ajax (name, points) VALUES (?, ?)";
$stmt = $conn->prepare($sql);
$stmt->execute([$name, $points]);
}
function getUsers($conn) {
$sql = "SELECT * FROM ajax ORDER BY points DESC";
$stmt = $conn->prepare($sql);
$stmt->execute();
return $stmt->fetchAll();
}
?>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 2</title>
</head>
<body>
<input type="text" id="name" placeholder="Sök på namn" oninput="">
<div id="results">
</div>
<script>
const input = document.getElementById("name");
const resultHolder = document.getElementById("results");
input.addEventListener("input", () => {
const name = input.value;
fetch("ajax_api.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: `name=${name}`
})
.then(response => response.json())
.then(data => {
resultHolder.innerHTML = "";
data.forEach(user => {
const userElement = document.createElement("div");
userElement.innerHTML = `
<div>${user.name}</div>
<div>${user.points}</div>
`;
resultHolder.appendChild(userElement);
});
});
});
</script>
</body>
</html>