Від автора: в даний час практично кожен сайт використовує JavaScript і різні бібліотеки написані на ньому, приміром jQuery. І дуже часто виникає завдання у передачі значень змінних з JavaScript PHP. Тому в даному уроці ми з Вами розглянемо способи, за допомогою яких, можна вирішити дану задачу. Хочу звернути увагу, що передати можна тільки значення, а не саму змінну, певної мови.
1. Постановка задачі
Для початку розглянемо сайт, на прикладі якого ми будемо вивчати тему сьогоднішнього уроку:
Це дуже простий сайт, що складається з двох сторінок: головна сторінка, виводить список статей зберігаються в базі даних, і сторінка повного перегляду тексту статті. Вихідний код цього сайту, я тут приводити не буду, так як він буде доступний Вам в исходниках до цього уроку. Розглянемо тільки призначення головних файлів:
index.php – підключає необхідні файли та виводить головну сторінку на екран;
view_text.php – виводить сторінку перегляду повного тексту статті;
config.php – містить налаштування для підключення до бази даних і власної підключення;
funcntions.php – містить дві функції по отриманню всіх статей бази даних і отримання однієї конкретної статті за її ідентифікатору;
js/script – порожній файл, у якому ми будемо писати сценарії на мові JavaScript;
css/style.css – файл стилів для сайту.
Тепер давайте розглянемо способи передачі значень змінних з JavaScript PHP.
2. Передача значення змінних з PHP в JavaScript
Це мабуть самий простий спосіб. Давайте пригадаємо, де міститься інтерпретатор мови JavaScript?
Інтерпретатор мови JavaScript, міститься у браузері. Тобто код JavaScript обробляється безпосередньо браузером, коли сторінка передається йому від сервера.
Тепер згадаємо, де інтерпретується мову PHP? Інтерпретатор мови PHP міститься на сервері. При цьому PHP інтерпретується до того, як сторінка потрапить в браузер користувача. Значить, для передачі значення змінної мови PHP в JavaScript, досить між тегами script вивести значення цієї змінної. Наприклад, створимо змінну в конфігураційному файлі config.php (змінна PHP):
$button = “Button”;
Потім у файлі index.php передамо її значення в JavaScript (перед підключенням файлу js/script.js):
Тепер у файлі js/script.js використовуємо значення цієї змінної. А саме, створимо блок з класом for_button, в блоці
$(“.content”).prepend(“
“+ button + “
“);
І додамо кілька правил css для нового створеного блоку в файл css/style.css:
.for_button {
padding:5px;
text-align:center;
border:1px solid green;
border-radius:5px;
width:150px;
}
Тепер давайте подивимося, що у нас вийшло:
Як Ви бачите, ми створили новий блок, у вигляді кнопки і його вміст формується в змінних PHP.
3. Передача значень змінних з JavaScript, PHP методом GET
Передача значень змінних мови JavaScript PHP, завдання дещо складніше, оскільки потрібно передати значення змінної на сервер інтерпретатор мови PHP. Це можна реалізувати як методом GET (через рядок), так і методом POST. Метод GET передбачає передачу даних через адресний рядок. Тому перейдемо в файл js/script.js і додамо наступний код:
var id = 2;
$(“.for_button”).click(function() {
location.href = “http://localhost/lessons/phptojs/view_text.php?id=” + id;
});
Тобто, ми оберемо за допомогою бібліотеки jQuery раніше створену кнопку з класом for_button і опишемо для неї функцію-обробник події click (натискання мишею по даному елементу). Іншими словами при натисканні мишею по кнопці виконається функція, описана в методі click().
У тілі даної функції ми виконаємо перенаправлення на сторінку повного перегляду тексту статті. При цьому через адресний рядок передамо її значення. Таким чином, ми передаємо значення змінної id файл view_text.php, тобто з JavaScript в сценарій мови PHP. Давайте подивимося, що у нас вийшло (оновлюємо головну сторінку і клікаєм по раніше створеної кнопки):
Як Ви бачите значення змінної успішно передано.
4. Передача значень змінних з JavaScript, PHP методом POST
Тепер розглянемо передачу значень змінних з JavaScript, PHP за допомогою методу POST. Для цього у файлі index.php створимо просту форму ( у блоці з класом content):
Зверніть увагу, що значення атрибута value я залишив порожнім. Ми його встановимо, використовуючи JavaScript. А саме, створимо змінну search і, використовуючи jQquery, присвоїмо значення атрибуту value текстового поля:
var search = “search”;
$(“input[type=text]”).val(search);
Тобто значення змінної search ми переносимо в атрибут value, а потім залишається лише надіслати дані форми.
При цьому, значення змінної search буде передано в сценарій мови PHP. Зверніть увагу, що обробником форми виступає файл view_text.php. Значить, в нього потрібно додати код, який обробить дані прийшли методом POST. Тому відкриємо файл і додамо наступний код:
if($_POST[‘search’]) {
$str = $_POST[‘search’];
}
Потім в одному з блоків виведемо значення змінної $str:
При цьому на екран ми відобразимо дані, які прийшли на цю сторінку з методу POST, а значить з скрипта написаного на мові JavaScript. Дайте відправимо дані форми і подивимося, що вийшло:
5. Асинхронний спосіб передачі значень змінних з JavaScript, PHP і навпаки
Досі, ми з Вами розглядали так званий синхронний спосіб передачі даних на сервер. Тобто, коли при передачі даних ми з Вами бачили перезавантаження сторінки в браузері, так чином на будь-яке наша дія браузер відправляє дані на сервер, що супроводжується оновленням сторінки.
Але, як Ви знаєте, існує метод AJAX, використовуючи який можна передавати асинхронні запити на сервер. При яких, дані надсилаються на сервер, але оновлення сторінки не відбувається, тобто дані відправляються як би на тлі і користувач цього не зауважує.
Тому, давайте передамо значення змінної з JavaScript, PHP, використовуючи метод AJAX (знову ж значення змінної потрібно надіслати на сервер інтерпретатор мови PHP). Для цього відкриємо файл js/script.js і змінимо функцію обробник події click, за раніше створеної кнопки (будемо відправляти дані на сервер натискання мишею по кнопці):
var ob = {
‘id’:3
}
$(“.for_button”).click(function() {
$.ajax({
type:’POST’,
url:’index.php’,
dataType:’json’,
data:”param=”+JSON.stringify(ob),
success:function(html) {
$(“
“+ html[‘title’] + “
“).
prependTo(“.content”).
hide().
fadeIn(500);
}
});
});
Для роботи з AJAX використовуємо бібліотеку jQuery і її метод ajax, з наступними параметрами:
type:’POST’ – тип запиту на сервер;
url:’index.php’ – шлях до файлу на сервера, який відправляємо дані;
dataType:’json’ – формат даних, які прийдуть як відповідь від сервера. В даному випадку умовимося, що сервер відправить дані у форматі JSON. При цьому отримана рядок буде автоматично конвертована в об’єкт. JSON – спеціальний рядковий формат представлення даних. Використовуючи, який можна представити будь-масив або об’єкт у вигляді звичайної рядка, з якої зручно виконувати різні маніпуляції.
Приклад JSON рядка, що описує об’єкт з двома властивостями: firstname і lastname:
{
“firstName”: “Іван”,
“lastName”: “Іванов”
}
data – дані, які відправляються на сервер. Зверніть увагу, що на сервер ми відправимо об’єкт ob, який представимо у вигляді JSON рядка, за допомогою функції JSON.stringify(ob);
success – описуємо функцію яка буде виконана у результаті успішного запиту до сервера. Параметр html, даної функції – це відповідь від сервера. Який повинен обов’язково прийти у форматі JSON, у відповідності з налаштуванням dataType, і який буде конвертований в об’єкт (тобто в html міститься відповідь від сервера у вигляді об’єкта). У тілі даної функції, виведемо на екран заголовок статті (умовимося, що відповідь від сервера – це буде масив даних про конкретної статті). Для цього використовуємо метод prependTo(), та вставити дані в блок з класом for_content. При цьому додамо анімаційний ефект появи даних на екрані, за допомогою методу fadeIn() (метод hide() потрібен, що б миттєво приховати виводиться на екран блок, для того щоб надалі його можна було плавно показати на екран, використовуючи метод fadeIn()).
Тепер, так як ми передаємо дані в файл index.php, в нього потрібно додати код, який обробляє ці дані:
if($_POST[‘param’]) {
$param = json_decode($_POST[‘param’]);
$row = get_text($param->id);
echo json_encode($row);
exit();
}
Тобто, перевіряємо, якщо прийшли дані методом POST, то зберігаємо їх у змінну $param. При цьому попередньо обробивши їх функцією json_decode(). Яка декодує JSON рядок і повертає об’єкт, що зберігається в ній. Таким чином у змінній $param міститься об’єкт. У якого є властивість $id, його ми використовуємо в якості ідентифікатора статті для функції get_text(), яка повертає масив даних статті за її ідентифікатором. Цей масив ми збережемо в змінну $row. Потім конвертуємо його в JSON рядок і виводимо на екран, використовуючи функцію echo. Так як ми звертаємося до даного файлу асинхронно, і цю ділянку коду спрацює, коли прийдуть дані методом POST (а в нашому випадку, вони прийдуть тільки асинхронно). Тому весь вивід на екран і буде відповіддю від сервера, який потрапить в змінну html. Далі що б у відповідь від сервера, не потрапило зайвих даних, ми виконуємо exit().
Ось і все, можна перевіряти роботу нашого скрипта:
Як Ви бачите, Все успішно працює. Таким чином, ми з Вами передали значення змінної JavaScript PHP і навпаки, використовуючи асинхронні запити до сервера.
На цьому давайте прощатися. Всього Вам доброго і вдалого кодування!!!
