Передать переменную из php в js: Передача данных из php в javascript

Передача переменных между PHP и jQuery

Я хочу поделиться с вами функцией WordPress, и это чертовски круто!

Готовы?

Он называется wp_localize_script() и передает переменные из PHP в jQuery.

Знаю, знаю… Я тоже чуть не облился восторгом, когда впервые услышал об этом.

PHP и jQuery (JavaScript)

Это два самых популярных веб-языка ATM.

Основной код WordPress написан на PHP, а интерфейс панели администратора активно использует jQuery и JavaScript.

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

Это называется областью действия.

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

Будучи отдельными языками, PHP, jQuery и JavaScript полностью выходят за рамки.

Их код выполняется через различные интерпретаторы, встроенные в сервер для PHP и веб-браузер для jQuery и JavaScript.

Они даже не замечают присутствия друг друга.

Но поскольку все три активно используются при разработке веб-сайтов WordPress, будут случаи, когда вам просто нужно передать данные WordPress из PHP в ваши файлы jQuery и JavaScript, чтобы они могли делать что-то классное в пользовательском интерфейсе (UI), что невозможно сделать с помощью PHP (легко).

Вот как это сделать.

Передача переменных между языками

Мы собираемся показать, насколько просто получить информацию с сайта WordPress с помощью PHP, объединить ее и отобразить во внешнем пользовательском интерфейсе с помощью jQquery или JavaScript.

Сначала мы создаем тестовый файл сценария jQuery с именем lc-jquery.js . Я храню это в папке js внутри нашей текущей темы.

Посмотреть код на Gist.

Довольно простые вещи.

Мы обнаруживаем щелчок по ссылке и отображаем окно предупреждения, показывающее неопределенную переменную 

lc_jqpost_info .

Подожди, откуда взялся lc_jqpost_info?

Терпение, мой юный падаван.

Мы создали тестовую страницу на WordPress и добавили на нее следующую ссылку с идентификатором #clickme, чтобы мы могли подключить к ней наш код jQuery.

Покажи мне что-нибудь

Теперь нам нужно загрузить скрипт jQuery в WordPress, и правильный способ сделать это — использовать функцию wp_enqueue_script().

Скопируйте следующий код в файл functions.php .

Посмотреть код на Gist.

Если вы не разместили файл сценария в том же месте, что и в этом примере, вам потребуется изменить его местоположение.

Если вы перезагрузите свою тестовую страницу и щелкнете по ссылке, вы обнаружите в окне проверки элемента отладчика Chrome ошибку jQuery, поскольку скрипт не может найти переменную lc_jqpost_info.

Это говорит нам о двух вещах.

1. Сценарий загружается правильно.

2. Теперь нам нужно что-то сделать с переменной lc_jqpost_info , ожидаемой сценарием.

Теперь нам нужно отсортировать эту переменную и передать некоторую информацию о PHP в jQuery

Передача информации о PHP в jQuery

Наконец, мы здесь и собираемся использовать потрясающую мощь wp_localize_script().

Замените код lc_load_query(), который вы только что вставили в свой functions.php файл со следующим:

Посмотреть код на Gist.

Мы добавили в код три строки.

Строка 4 делает переменную $post доступной для нашего кода.

Строка 5 создает переменную массива с именем $data и заполняет ее элементами somestring, post_id и post_title.

somestring — это просто стандартная строка, post_id содержит идентификатор текущей записи WordPress (в данном случае страницы с нашей тестовой ссылкой), а post_title содержит заголовок той же страницы.

В строке 6 происходит волшебство, и wp_localize_script() передает массив $data объекту lc_jqpost_info для скрипта lcjquerytest, который мы только что поставили в очередь.

Итак, чтобы было ясно, первый параметр — это то же имя, что и ваш сценарий jQuery, который вы поставили в очередь. Второй параметр — это имя нового объекта, который вы хотите сделать доступным для кода jQuery. Третий параметр — это имя массива, который мы создали в PHP для хранения данных, которые мы хотим передать скрипту jQuery.

Сохраните все, обновите тестовую страницу и нажмите на эту ссылку.

Вы должны увидеть диалоговое окно предупреждения, содержащее информацию PHP, переданную сценарию jQuery.

Потрясающе!

Была ли эта статья полезной?

ДаНет

Как передать параметры из php в компонент React | by Таня Ткачук

Как передать параметры из php в компонент React | Таня Ткачук | Medium 1 мин чтения

·

23 декабря 2019 г.

Хотите знать, как получить некоторые данные публикации WordPress для использования в контейнере ReactJS?

Пока вижу 3 варианта: СПА, ленивый и любимый.

1. HTTP-запрос

Если вы живете в идеальном мире без устаревшего кода, вы можете получать данные с сервера через HTTP-запрос. В реальной жизни, не имея выделенной серверной части API, вам нужно выбрать другое решение.

2. Глобальные переменные

Что может быть проще? Просто заполните свое глобальное пространство новой переменной! Шутя. Старайтесь избегать использования глобальных переменных, так как доступ к ним медленнее, чем к локальным, и все пользователи имеют доступ к глобальным данным (вы уверены, что хотите открыть их?).

3. Используйте атрибуты data-*

Мне нравится это решение! Просто добавьте свои параметры в атрибуты data-* и получите к ним доступ в конечной точке приложения через свойство набора данных. Красиво и понятно.

Знаете другой вариант? Не стесняйтесь поделиться в комментарии.

Удачи.

JavaScript

Автор: Таня Ткачук

22 Подписчики

Старший ведущий инженер @ Upflowy, любит учиться и пить кофе с корицей

Еще от Тани Ткачук

Таня Ткачук

в

Finder Tech

Finder-friendly Finder: опыт мамы троих детей

9 0175 Я начала работать полный рабочий день в сиднейском офисе Finder, когда моему третьему ребенку было два месяца. Восемь месяцев спустя я могу сказать, что Finder — это…

Чтение на 4 минуты · 13 января 2020 г.

Таня Ткачук

Советы руководителям команд-новичков

Истории неудач и уроки учился у великих лидеров команд, которых я знаю

5 минут чтения·10 марта 2021 г.

Таня Ткачук

в

Finder Tech

Перерывы в обучении — Как мы развиваемся в команде

Одной из наших ценностей в Finder является «Мастер своего дела», что означает быть лучшим в том, что вы делаете, и никогда не переставать учиться.

Чтение: 3 мин·11 сентября 2019 г.

Просмотреть все от Тани Ткачук

Рекомендовано на Medium

Иван Стоев

в

Кодирование для повышения уровня

Стоит ли вам использовать PHP (Laravel) в 2023 году

Плюсы и минусы

·4 минуты чтения·14 ноября 2022 г.

Мохаммад Ясер Ahmadi

25 VSCode Советы и подсказки

Список важных советов, подсказок и ярлыков для увеличения скорости кодирования

·5 минут чтения·5 марта

Списки

900 10 историй, которые помогут вам стать разработчиком программного обеспечения

19 историй·188 сохранений

General Coding Knowledge

20 историй·94 сохранения

Modern Marketing

32 истории·26 сохранений

Medium Publications Принимаемые публикации историй

145 историй·241 сохранение

Мария Ларами

в

Frontend Weekly

5 продвинутых приемов JavaScript для опытных разработчиков 🚀

В этой статье я раскрою 5 продвинутых приемов, которые помогут вам писать более эффективный и элегантный код.