Изменение цвета div на основе поля mysql

Question

Итак, я постараюсь дать вам как можно больше деталей, чтобы вы поняли, о чем я думаю.

Я работаю над небольшим веб-приложением, написанным в основном на php. У меня есть одна таблица в mysql с одной строкой, которая имеет поле имени пользователя, поле пароля и поле «состояние».

Веб-часть 1 страница с полями имени пользователя и пароля и кнопкой отправки. Когда имя пользователя и пароль верны, он включает состояние. Предполагается, что это генератор, который вы должны продолжать.

У меня есть cronjob, запускающий скрипт каждые 10 минут, чтобы выключить состояние. Это для небольшого соревнования, в котором я участвую. Мы должны контролировать сайт генератора, и если генератор отключается, мы должны ввести имя пользователя и пароль и снова включить его. Так что все это работает.

Мой вопрос заключается в том, что я хочу, чтобы маленький цветной квадрат был зеленым, когда генератор включен, и когда генератор выключен. Я хочу иметь возможность сделать это, не перезагружая страницу. Поэтому, если я смотрю на страницу и меняю настройки, она просто станет красной.

Я как-то смотрел на AJAX (поскольку я предполагаю, что это то, что мне нужно будет использовать) Но не нашел примеров чего-то подобного. Если бы кто-нибудь мог, не могли бы вы показать мне, как вы это сделаете с кратким примером синтаксиса? Помощь ценится ...

Answer 1

HTML

<div id="generator-state"></div> 

CSS

#generator-state { height: 100px; width: 100px;} 
#generator-state.on { background: green; } 
#generator-state.off { background: red; } 

JQuery

сделать вызов AJAX на сервер. Разберите объект данных, который возвращается для состояния генератора (data.state), и используйте это значение для установки класса в элементе #generator-state.

db.php запрашивает вашу базу данных MySQL.

setInterval() запускает AJAX каждые 10 минут.

function fetchState() { 
    $.get('/path/to/db.php', function(data) { 
    $('#generator-state').removeClass('on off').addClass(data.state === 'on' ? 'on' : 'off'); 
    }); 
} 

setInterval(fetchState, 10 * 60 * 1000); 

Answer 2

Хорошо, я получил все это. Я сделал javascript в другом файле и связал его со страницей. Есть ли заголовок или что-то, что нужно в файле javascript? Все, что у меня есть в этом файле, это то, что вы положили. И что именно должно быть в db.php? Я дам вам то, что у меня есть:

<?php 
require_once 'login.php'; 

$db_server=mysql_connect($db_hostname,$db_username,$db_password); 
if(!$db_server) die("Unable to connect to mysql: " . mysql_error()); 
mysql_select_db($db_database,$db_server) or die("Unable to connect to DB: " . mysql_error()); 

$query = "SELECT state FROM gen WHERE user='ccdc'"; 
$result = mysql_query($query); 
$data = mysql_fetch_row($result); 
?>