От автора: PHP имеет гораздо больше встроенных функций для работы со строками, массивами и другими типами данных по сравнению с JavaScript. Поэтому для многих естественным является желание вызывать функции PHP из JavaScript. Однако, как вы уже догадались или узнали, это не работает должным образом.
Может быть множество других случаев, когда вы захотите запустить некоторый PHP-код внутри JavaScript — например, чтобы сохранить некоторые данные на сервере. Простое размещение PHP-кода внутри JavaScript в этом случае тоже не сработает.
Причина, по которой вы не можете просто вызвать функцию PHP из JavaScript, связана с порядком, в котором выполняются эти языки. PHP — это серверный язык, а JavaScript — это, прежде всего, клиентский язык.
Каждый раз, когда вы хотите посетить страницу, браузер отправляет запрос на сервер, который затем обрабатывает запрос и генерирует некоторые выходные данные, запустив код PHP. Затем полученная или сгенерированная веб-страница отправляется вам обратно. Браузер обычно ожидает, что веб-страница будет состоять из HTML, CSS и JavaScript. Любой PHP, который вы могли разместить или повторить внутри JavaScript, либо уже запущен, либо не будет работать вообще, когда веб-страница загружается в браузере.
Однако надежда еще не потеряна. В этой статье я объясню, как вы можете вызывать функции PHP из JavaScript и функции JavaScript из PHP.
Вызов функции PHP из JavaScript
Мы можем использовать AJAX для вызова функции PHP для данных, созданных внутри браузера. AJAX используется на многих веб-сайтах для обновления частей веб-страниц без полной перезагрузки страницы. Если все сделано правильно, это может значительно улучшить взаимодействие с пользователем.
Имейте в виду, что код PHP по-прежнему будет работать на самом сервере. Мы просто предоставим ему данные из нашего скрипта.
Использование jQuery AJAX для запуска кода PHP
Если вы используете jQuery, становится невероятно легко вызвать любой файл PHP с кодом, который вы хотите запустить.
Вы можете передать в функцию один или два параметра ajax(). Когда передаются два параметра, первым будет URL-адрес веб-страницы, на которую браузер отправит ваш запрос. Когда вы передаете только один параметр ajax(), URL-адрес будет указан в конфигурации.
Второй параметр содержит набор различных параметров конфигурации, чтобы указать данные, которые вы собираетесь обрабатывать, и что делать в случае успеха или неудачи и т. д. Параметры конфигурации передаются в формате JSON.
Вы можете использовать параметр method, чтобы указать метод HTTP, который следует использовать для выполнения запроса. Мы будем устанавливать его как POST, потому что мы будем отправлять данные на сервер.
Теперь давайте рассмотрим пример базового запроса AJAX, в котором мы будем передавать данные в файл PHP и вызывать функцию PHP wordwrap() внутри этого файла. Вот наша полная веб-страница:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>PHP Function in JavaScript Demo</title>
<style>
body { font-family: 'Lato'; font-weight: 400; font-size: 1.4rem;
} p { text-align: center; margin-bottom: 4rem;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p class="unbroken">The United States (U.S. or US)—officially the United States of America (USA), commonly known as America—is a country primarily located in North America, consisting of 50 states, a federal district, five major self-governing territories, 326 reservations, and various possessions. At 3.8 million square miles (9.8 million square kilometers), it is the world's third- or fourth-largest country by total area. With a population of more than 328 million people, it is the third most populous country in the world. The national capital is Washington, D.C., and the most populous city is New York City.</p>
<p class="broken"></p>
<script>
$.ajax({ method: "POST", url: "wrap.php", data: { text: $("p.unbroken").text() }
}) .done(function( response ) { $("p.broken").html(response); });
</script>
</body>
</html>Поместите следующий код в файл с именем wrap.php в том же каталоге.
<?php $text = $_POST['text']; $output = wordwrap($text, 60, "<br>"); echo $output; ?>
Помните, что у вас есть данные echo, которые вы хотите отправить обратно в браузер. Если все пойдет хорошо, ваша веб-страница будет выглядеть, как на изображении ниже.
Использование Fetch API для запуска кода PHP
Вы также можете использовать Fetch API для запуска кода PHP на данных, собранных в браузере, отправив запрос POST на сервер. В предыдущем примере мы могли заменить код AJAX следующим кодом JavaScript, чтобы получить тот же результат.
fetch('wrap.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, body: "text=" + document.querySelector("p.unbroken").innerText }) .then(response => response.text()) .then(data => document.querySelector("p.broken").innerHTML = data);Как и в примере с AJAX, мы указываем URL-адрес и предоставляем дополнительную информацию заголовка, которую мы будем отправлять в виде URL-кодировки. Это позволяет нам использовать $_POST на стороне сервера для чтения данных.
Вызов функции JavaScript из PHP
Как вы уже знаете, PHP будет запускаться раньше JavaScript, когда вы запрашиваете веб-страницу с какого-либо сервера. Мы также можем вывести все, что хотим показать на веб-странице, используя echo. То же самое echo можно использовать для вывода JavaScript, который будет работать в браузере клиента.
Вот пример кода, который проверяет массив строк, чтобы найти индекс последнего палиндрома. Этот индекс сохраняется в переменной PHP, которая затем передается в JavaScript, записанный внутри тега script с использованием echo.
<?php $words = ['apple', 'radar', 'mango', 'civic', 'banana']; $pal_index = 0;
$last_pal = 0;
foreach($words as $word) { if($word == strrev($word)) { $last_pal = $pal_index; } echo '<p>'.ucfirst($word).'</p>'; $pal_index += 1;
}
?>
<script>
<?php
echo 'let p_el = document.querySelectorAll("p")['.$last_pal.']';
?>
let red = Math.round(p_el.getBoundingClientRect().top)%256;
let green = Math.round(p_el.getBoundingClientRect().right)%256;
p_el.style.color = "rgb(" + red + ", " + green + ", 0)";
</script>В приведенном выше примере показано, как можно передавать данные из PHP в JavaScript. Просто убедитесь, что код, который вы выводите, является допустимым JavaScript.
Заключение
Все мы знаем, что PHP работает на серверах, а JavaScript обычно работает в браузерах. Поскольку они оба выполняются в разное время, вы не можете просто вызывать функции одного языка внутри другого и ожидать, что код будет работать. Однако есть способы обойти эту проблему, сделав возможным обмен информацией между PHP и JavaScript.
Подводя итог, вы можете использовать AJAX, когда хотите вызвать функцию PHP из JavaScript или запустить код PHP для некоторых данных, созданных внутри браузеров. Вы можете использовать echo в PHP для вывода кода JavaScript, который позже будет запущен в браузере клиента. Если у вас есть вопросы по статье, дайте мне знать в комментариях.
Автор: Monty Shokeen
Источник: code.tutsplus.com
Редакция: Команда webformyself.