Как передать переменные и данные из PHP в JavaScript

javascript php


У меня есть переменная в PHP,и мне нужно ее значение в моем JavaScript-коде.Как я могу получить мою переменную из PHP в JavaScript?

У меня есть код,который выглядит вот так:

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

У меня есть код JavaScript, который нуждается в val и выглядит следующим образом:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>




Answer 1 Madara's Ghost


На самом деле для этого есть несколько подходов.Некоторые требуют больших накладных расходов,чем другие,а некоторые считаются лучшими.

Ни в каком особом порядке:

  1. Используйте AJAX для получения необходимых данных с сервера.
  2. Эхо данных где-нибудь на странице,и использовать JavaScript,чтобы получить информацию из DOM.
  3. Эхо данных непосредственно на JavaScript.

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

1.Используйте AJAX,чтобы получить необходимые данные с сервера.

Этот метод считается лучшим, потому что сценарии на стороне сервера и на стороне клиента полностью разделены .

Pros

  • Лучшее разделение между слоями - если завтра вы перестанете использовать PHP и захотите перейти на сервлет, REST API или какой-либо другой сервис, вам не придется менять большую часть кода JavaScript.
  • Более читабельно - JavaScript - это JavaScript, PHP - это PHP. Не смешивая их, вы получите более читаемый код на обоих языках.
  • Позволяет асинхронную передачу данных. Получение информации из PHP может быть дорогостоящим. Иногда вы просто не хотите ждать информацию, загружать страницу и получать информацию в любое время.
  • Данные не находятся непосредственно в разметке - это означает, что ваша разметка хранится в чистоте от любых дополнительных данных, и только JavaScript видит их.

Cons

  • Задержка - AJAX создает HTTP-запрос, а HTTP-запросы передаются по сети и имеют сетевые задержки.
  • Состояние - данные, извлеченные с помощью отдельного HTTP-запроса, не будут содержать никакой информации из HTTP-запроса, извлекшего HTML-документ. Вам может понадобиться эта информация (например, если документ HTML генерируется в ответ на отправку формы), и, если вы это сделаете, вам придется каким-то образом передавать ее. Если вы исключили возможность встраивания данных на страницу (которая у вас есть, если вы используете эту технику), то это ограничивает вас файлами cookie / сессиями, которые могут зависеть от условий гонки.

Пример внедрения

С AJAX вам понадобятся две страницы,одна-где PHP генерирует вывод,а вторая-где JavaScript получает этот вывод:

get-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to echo the result.
                      // All data should be json_encode()d.

                      // You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (или как там называется фактическая страница).

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

Приведенная выше комбинация двух файлов предупредит 42 , когда файл завершит загрузку.

Дополнительный материал для чтения

2.Эхо данных где-нибудь на странице,и использовать JavaScript для получения информации из DOM

Этот метод менее предпочтителен, чем AJAX, но все же имеет свои преимущества. Он все еще относительно разделен между PHP и JavaScript в том смысле, что в JavaScript нет прямого PHP.

Pros

  • Быстро - операции DOM часто бывают быстрыми, и вы можете хранить и получать доступ к большому количеству данных относительно быстро.

Cons

  • Потенциально несемантическая разметка - обычно происходит то, что вы используете какой-то <input type=hidden> для хранения информации, потому что легче получить информацию из inputNode.value , но это означает, что у вас есть бессмысленный элемент в ваш HTML. HTML имеет элемент <meta> для данных о документе, а HTML 5 вводит атрибуты data-* для данных специально для чтения с помощью JavaScript, которые можно связать с конкретными элементами.
  • Загрязнение источника - данные, которые генерирует PHP, выводятся непосредственно в источник HTML, что означает, что вы получаете больший и менее сфокусированный источник HTML.
  • Труднее получить структурированные данные - структурированные данные должны быть действительными HTML, в противном случае вам придется самостоятельно экранировать и преобразовывать строки.
  • Сильно связывает PHP с логикой данных - поскольку PHP используется в презентации, вы не можете четко разделить их.

Пример внедрения

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

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3.Эхо данных непосредственно на JavaScript

Это,наверное,легче всего понять.

Pros

  • Очень легко реализуемо - требуется очень мало, чтобы реализовать это и понять.
  • Не изменяет исходный код - переменные выводятся непосредственно в JavaScript, поэтому DOM не затрагивается.

Cons

  • Сильно связывает PHP с логикой данных - поскольку PHP используется в презентации, вы не можете четко разделить их.

Пример внедрения

Реализация относительно проста:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

Удачи!




Answer 2 Benjamin Gruenbaum


Я попробую более простой ответ:

Объяснение проблемы

Во-первых,давайте разберемся с потоком событий,когда страница обслуживается с нашего сервера:

  • Сначала запускается PHP,он генерирует HTML,который обслуживается клиентом.
  • Затем HTML доставляется клиенту,после того,как PHP закончит с ним,я хотел бы подчеркнуть,что как только код покидает сервер-PHP закончил с ним и больше не может получить к нему доступ.
  • Затем HTML с JavaScript достигает клиента,который может выполнить JavaScript на этом HTML.

В общем, главное, что нужно помнить, это то, что HTTP не имеет состояния . Как только запрос покинул сервер, сервер не может его коснуться. Итак, это оставляет наши варианты:

  1. Отправьте больше запросов от клиента после того, как начальный запрос сделан.
  2. Кодируйте то,что должен был сказать сервер в первоначальном запросе.

Solutions

Это основной вопрос,который ты должен задать себе:

Я пишу сайт или заявку?

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

Website

Посылка большего количества запросов от клиента после того, как начальный запрос сделан, медленна, поскольку это требует большего количества запросов HTTP, которые имеют значительные накладные расходы. Более того, он требует асинхронности, поскольку для выполнения AJAX-запроса требуется обработчик, когда он завершается.

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

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

У вас есть два способа решить эту проблему

  • Установить cookie - cookie - это заголовки, отправляемые в HTTP-запросах, которые могут прочитать и сервер, и клиент.
  • Кодируйте переменную как JSON - JSON выглядит очень близко к объектам JavaScript, и большинство объектов JSON являются допустимыми переменными JavaScript.

Настройка cookie действительно не очень сложна, вы просто присваиваете ей значение:

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

Затем вы можете прочитать его с помощью JavaScript, используя document.cookie :

Вот короткий ручной парсер,но ответ,с которым я связался прямо над ним,имеет лучше проверенные:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

Печенье хорошо подходит для небольших данных.Это то,что часто делают службы слежения.

Как только у нас будет больше данных,мы сможем кодировать их с помощью JSON внутри переменной JavaScript:

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

Предполагая, что $value способен json_encode на стороне PHP (обычно это так). Эта техника - то, что Stack Overflow делает, например, со своим чатом (только с использованием .NET вместо PHP).

Application

Если вы пишете приложение-вдруг начальное время загрузки не всегда так важно,как текущая производительность приложения,и оно начинает окупаться для загрузки данных и кода отдельно.

Мой ответ здесь объясняет, как загрузить данные, используя AJAX в JavaScript:

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

Или с Джей Кьюри:

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

Теперь сервер просто должен содержать /your/url маршрут / файл, который содержит код, который захватывает данные и что-то с ними делает, в вашем случае:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

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

Постскриптум: Вы должны очень хорошо знать векторы атак XSS, когда вводите что-либо из PHP в JavaScript. Очень трудно правильно избежать значений и это зависит от контекста. Если вы не знаете, как обращаться с XSS, или не знаете об этом - прочитайте эту статью OWASP , эту и этот вопрос .




Answer 3 yuikonnu


Обычно я использую атрибуты data-*в HTML.

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Variable "service" now contains the value of $myService->getValue();
        });
    });
</script>

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

Вы можете прочитать больше о свойстве набора данных здесь: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset




Answer 4 Jessé Catrinck


<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

требует json_encode():

  • PHP 5.2.0 или более
  • $PHPVar в кодировке UTF-8, Unicode.



Answer 5 Nishant Mendiratta


Просто используйте один из следующих методов.

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

OR

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>