Вам понадобится
- Начальные знания языков PHP, JavaScript и HTML
Инструкция
1
На стадии формирования страницы передать переменную вместе с её значением из php-скрипта в JavaScript-сценарий не представляет сложности. PHP-скрипт сам формирует HTML-код запрашиваемой страницы, в том числе и содержащиеся в нём скрипты. Это означает, что он может вписать в код JavaScript любые переменные, которые следует передать вместе с их значениями. Например, этот php-скрипт передаст клиентскому сценарию переменную с именем "serverTime", содержащую текущее время сервера в формате ЧАС:МИНУТА :
<?php
$JSvarName = 'serverTime';
$JSvarValue = date('H:i');
$JScode = $JSvarName.'="'.$JSvarValue.'";';
print '<script language="javascript">'.$JScode.'alert("А на сервере сейчас "+'.$JSvarName.');</script>'
?>
<?php
$JSvarName = 'serverTime';
$JSvarValue = date('H:i');
$JScode = $JSvarName.'="'.$JSvarValue.'";';
print '<script language="javascript">'.$JScode.'alert("А на сервере сейчас "+'.$JSvarName.');</script>'
?>
2
Простейший вариант передачи имён и значений переменных в обратном направлении (от JS-скрипта в браузере клиента к PHP-скрипту на веб-сервере) может выглядеть в HTML-коде страницы так:
<script language="javascript">
var now = new date();
var varName = 'clientTime';
var varValue = now.getHours() + ":" + now.getMinutes();
window.location.href = 'http://sa/test2.php?' + varName + '=' varValue;
</script>
Этот сценарий отправит скрипту с именем test2.php имя переменной "clientTime" и её значение, содержащее текущее время компьютера в том же формате ЧАС:МИНУТА. Такой метод передачи данных называют «синхронным» - он приведёт к немедленной перезагрузке страницы. Точнее - вместо текущей страницы в браузер будет загружен результат работы скрипта test2.php. Код этого php-сценария может выглядеть так:
<?php
if($_GET) echo 'Получена переменная '.key($_GET).'='.$_GET[key($_GET)];
?>
Объединить все три рассмотренные части кода передачи переменных с сервера в браузер и обратно в один php-файл можно таким образом:
<?php
if($_GET) echo 'Получена переменная '.key($_GET).'='.$_GET[key($_GET)];
$JSvarName = 'serverTime';
$JSvarValue = date('H:i');
$JScode = $JSvarName.'="'.$JSvarValue.'";';
print '<script language="javascript">'.$JScode.'alert("А на сервере сейчас "+'.$JSvarName.');</script>'
?>
<script language="javascript">
function sendData() {
var now = new date();
var varName = 'clientTime';
var varValue = now.getHours() + ":" + now.getMinutes();
window.location.href = "http://sa/test2.php?" + varName + "=" + varValue;
return false;
}
</script>
<br /><br /><a href="javascript:sendData();">Отправить данные на сервер</a>В этом объединённом (PHP + JavaScript) сценарии php-код сформирует JavaScript-код, «передавая» ему переменную с именем "serverTime" и значением, содержащем текущее время сервера. При загрузке страницы в браузер JavaScript-сценарий покажет сообщение с этим временем. Затем щелчок пользователя по ссылке «Отправить данные на сервер» запустит функцию sendData(), которая отправит на сервер GET-запрос, передающий php-скрипту имя переменной ("clientTime") и её значение (время клиента). Php-скрипт, прочтя из суперглобального массива $_GET имя и значение переменной, напечатает её и начнёт весь описанный сценарий заново.
<script language="javascript">
var now = new date();
var varName = 'clientTime';
var varValue = now.getHours() + ":" + now.getMinutes();
window.location.href = 'http://sa/test2.php?' + varName + '=' varValue;
</script>
Этот сценарий отправит скрипту с именем test2.php имя переменной "clientTime" и её значение, содержащее текущее время компьютера в том же формате ЧАС:МИНУТА. Такой метод передачи данных называют «синхронным» - он приведёт к немедленной перезагрузке страницы. Точнее - вместо текущей страницы в браузер будет загружен результат работы скрипта test2.php. Код этого php-сценария может выглядеть так:
<?php
if($_GET) echo 'Получена переменная '.key($_GET).'='.$_GET[key($_GET)];
?>
Объединить все три рассмотренные части кода передачи переменных с сервера в браузер и обратно в один php-файл можно таким образом:
<?php
if($_GET) echo 'Получена переменная '.key($_GET).'='.$_GET[key($_GET)];
$JSvarName = 'serverTime';
$JSvarValue = date('H:i');
$JScode = $JSvarName.'="'.$JSvarValue.'";';
print '<script language="javascript">'.$JScode.'alert("А на сервере сейчас "+'.$JSvarName.');</script>'
?>
<script language="javascript">
function sendData() {
var now = new date();
var varName = 'clientTime';
var varValue = now.getHours() + ":" + now.getMinutes();
window.location.href = "http://sa/test2.php?" + varName + "=" + varValue;
return false;
}
</script>
<br /><br /><a href="javascript:sendData();">Отправить данные на сервер</a>В этом объединённом (PHP + JavaScript) сценарии php-код сформирует JavaScript-код, «передавая» ему переменную с именем "serverTime" и значением, содержащем текущее время сервера. При загрузке страницы в браузер JavaScript-сценарий покажет сообщение с этим временем. Затем щелчок пользователя по ссылке «Отправить данные на сервер» запустит функцию sendData(), которая отправит на сервер GET-запрос, передающий php-скрипту имя переменной ("clientTime") и её значение (время клиента). Php-скрипт, прочтя из суперглобального массива $_GET имя и значение переменной, напечатает её и начнёт весь описанный сценарий заново.
3
Всё описанное реализует сценарий «синхронной» передачи данных. Реализация «асинхронного» метода обмена данными между клиентскими и серверными скриптами получила собственное имя AJAX (Asynchronous Javascript and XML — «асинхронный JavaScript и XML»). Эта тема заслуживает рассмотрения в отдельной статье.