Тестовый дизайн новой версии сайта IGD.BY         RU   |   EN
Временные зоны через jQuery. Передача значений переменных из JavaScript в PHP
Автор: Кристофер

В этой статье мы покажем решение сразу двух довольно популярных вопросов, а именно: (1) работа с временными зонами и (2) передача данных из JavaScript в PHP. География сайтов нередко затрагивает множество регионов, и особеннов тех случаях, когда проекты разрастаются, перед разработчиками ставятся нетривиальные задачи по решению вопроса с часовыми поясами и отображением времени. А начинающие разработчики довольно длительное время проводят в поиске решения по передаче данных из JavaScript в PHP, о чем свидетельствует множество форумов, а также вопросы, которые нам задают напрямую. 

Сейчас мы покажем всё на простом примере. 

Допустим, у нас на сайте есть форма входа для зарегистрированных пользователей. Припишем небольшое ТЗ:

1. После успешной авторизации вместо формы входа отображается время входа посетителя и кнопка "Выход".
2. Время должно соотвествовать тому региону, из которого работает посетитель. 

Саму задачу можно решить сразу несколькими способами, например, если работать чисто на стороне сервера, то нужно узнать IP посетителя, затем его часовой пояс, и затем используя несколько кульбитов вывести его время. Если же идти со стороны клиента, то всё гораздо проще, потому как JavaScript-функция Date(); будет возвращать текущие настройки даты и времени для браузера, точнее, системы, пользователя. Остается лишь грамотно передать эти данные серверу, точнее, php-сценариям, формирующим вывод страницы. Как мы это сделаем...

Для начала создаем простую форму:

<form method="post" action="/enter_user.php">
<input name="current_user_mail" type="text" placeholder="ваш email"/>
<input name="current_user_pass" type="password" placeholder="пароль"/><br/>
<input type="hidden" name="hour" value=""/>
<input type="hidden" name="min" value=""/>
<input type="hidden" name="sec" value=""/>
<input name="esub" type="submit" value="ВОЙТИ"/>
<a href="/register/">РЕГИСТРАЦИЯ</a>
</form>

Этот фрагмент кода взят из живого работающего примера, и как видно мы имеем два поля input, в которые вводится email пользователя и пароль (соотвественно типы text и password), также у нас есть три невидымых input'а (тип hidden), в которые мы будем передавать значения текущего пользовательского времени (часы, минуты, секунды). Выполнение формы производится по нажатию input типа submit, ну, и плюс тут есть ссылка на регистрацию. То есть, самая что ни на есть стандартная форма входа. 

За её обработку отвечает файл enter_user.php, который находится в корне сайта. 

Теперь немного усложним задачу, поскольку при входе форма будет меняться, и после осуществления самого входа, отобразится время входа и кнопка "Выход". Для этих целей нам нужно использовать сессии на стороне PHP, причем в рамках массива $_SESSION введем специальный флаг $_SESSION["current_user_status"], который будет равен 1, если пользователь зашел.

Таким образом, форма преобразуется до такого вида:

<?

$session_start();

if($_SESSION["current_user_status"]==1){?>

<!--форма вошедшего пользователя-->
<form method="post" action="/close_session.php">
<?=$_SESSION["current_user_enter_time"];?>
<input type="submit" value="ВЫЙТИ"/>
</form>
	
	<?} else {?>
	
<!--форма входа-->
<form method="post" action="/enter_user.php">
<input name="current_user_mail" type="text" placeholder="ваш email"/>
<input name="current_user_pass" type="password" placeholder="пароль"/><br/>
<input type="hidden" name="hour" value=""/>
<input type="hidden" name="min" value=""/>
<input type="hidden" name="sec" value=""/>
<input name="esub" type="submit" value="ВОЙТИ"/>
<a href="/register/">РЕГИСТРАЦИЯ</a>
</form>
		
	<?}?>

То есть мы активизируем сессию, проверяем флаг на 1, если таковое имеется в наличии, то отображаем форму с отображением времени входа пользователя и кнопкой выйти. В противном случае, выводится просто форма ввода. 

При этом обратите внимание, что мы имеем абсолютно разные формы, у которых разные файлы сценариев обработки. 

Теперь начнем писать JavaScript-код, который по новым требованиям Google следует размещать в самом конце страницы, перед закрывающим тегом body. 
Итак, что же мы пропишем в конце нашей страницы...

<!--вызов библиотеки jQuery-->
<script src="/js/jquery-1.11.0.min.js"></script>

<!--наша функция-->
<?if($_SESSION["current_user_status"]!=1){?>
	<script>
	$("input[name=esub]").click(function() {
	var time = new Date();
	var th = time.getHours();
	var tm = time.getMinutes();
	var ts = time.getSeconds();
	$("input[name=hour]").val(th);
	$("input[name=min]").val(tm);
	$("input[name=sec]").val(ts);
	});
</script>
	<?}?>

Если проанализировать код, то по нажатию на submit формы входа, определяется текущее время, и заполняются значения value наших невидимых input'ов. Таким образом они передаются в массив $_POST, и дальше уже абсолютно нехитрое дело обработки.

На самом деле, данный метод показан на самом простом примере, но среди наших задач именно он часто используется в более сложных реализациях, связанных с временными географическими зонами, например, в случаях реализации чатов, отображения локализованного времени на форумах и так далее.