Для работы асинхронной установки, подобной этой, необходимы три вещи:
- Ваш серверный сценарий для обработки запросов AJAX
- Ваша страница интерфейса
- Ваш JQuery-скрипт для отправки ajax-запросов и получения данных
Ваш внутренний PHP-скрипт будет выглядеть примерно так (async.php):
<?php
if(isset($_POST['get_quotes'])) {
$sql = "select quotes from voted where voted.quote_id = 1";
$result = mysqli_query($link,$sql);
$row = mysqli_fetch_array($result);
echo "$row[0]";
}
if(isset($_POST['like'])) {
$link = mysqli_connect("localhost","root","","success");
$sql = "UPDATE voted SET likes = likes+1 WHERE voted.quote_id = 1";
$result = mysqli_query($link,$sql);
}
?>
Ваш внешний интерфейсстраница будет содержать элемент с идентификатором, который нужно подключить к JQuery, и кнопку с классом или идентификатором для захвата события щелчка (page.html):
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="core.js"></script>
<body>
<button id="increment-like" value="Like" type="button" />
<p id="like-count">
</p>
</body>
<html>
Наконец, ваш файл JavaScript должен выглядетьчто-то вроде этого, для базового запроса Ajax с использованием JQuery (core.js):
$(document).ready(function() {
// initially grab the database value and present it to the view
$('#like-count').text(getDatabaseValue());
$('#increment-like').on('click', function() {
incrementDatabaseValue();
});
});
function getDatabaseValue() {
$.post("async.php",
{
get_quotes: true
},
function (data, status) {
// check status here
//return value
return data;
});
}
function incrementDatabaseValue() {
$.post("async.php",
{
like: true
},
function (data, status) {
// check status here
// update view
$('#like-count').text(getDatabaseValue());
});
}
Я не тестировал этот код, но он должен быть четким и достаточно подробным, чтобы вы могли выбрать правильный путь.