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

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

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

<?php
     ...
     $val = $myService->getValue(); // makes an api and db call
?>

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

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

18 ответов


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

в определенном порядке:

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

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

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

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

плюсы

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

минусы

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

Пример Реализации

С 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.


Я собираюсь попробовать более простой ответ:

описание проблемы

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

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

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

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

решений

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

я пишу веб-сайт или приложение?

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

сайт

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

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

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

у вас есть два способа решения проблемы

  • установить cookie - cookies-это заголовки, отправленные в 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.

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

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

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

предполагая, что $value is json_encodeable на стороне PHP (обычно это так). Этот метод-это то, что StackOverflow делает со своим чатом, например (ТОЛЬКО используя .net вместо php).

приложение

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

мой ответ:здесь объясняет, как загружать данные с помощью 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();

или с jQuery:

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

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

<$php
 ...
 $val = myService->getValue(); // makes an api and db call
 echo json_encode($val); // write it to the output
 $>

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

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


Я обычно использую атрибуты 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');

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

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

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


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

json_encode() требует:

  • PHP 5.2.0 или более
  • $PHPVar кодируется как UTF-8, Unicode.

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

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

или

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

мне очень нравится, как WordPress работает с enqueue и локализация функции, поэтому, следуя этой модели, я написал простой класс для ввода скриптов на страницу в соответствии с зависимостями скриптов и для предоставления дополнительных данных для скрипта.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        unique script identifier
     * @param string $src   script src attribute
     * @param array  $deps      an array of dependencies ( script identifiers ).
     * @param array  $data      an array, data that will be json_encoded and available to the script.
     */
    function enqueue_script( $id, $src, $deps = array(), $data = array() ) {
        $this->scripts[$id] = array( 'src' => $src, 'deps' => $deps, 'data' => $data );
    }

    private function dependencies( $script ) {
        if ( $script['deps'] ) {
            return array_map( array( $this, 'dependencies' ), array_intersect_key( $this->scripts, array_flip( $script['deps'] ) ) );
        }
    }

    private function _unset( $key, &$deps, &$out ) {
        $out[$key] = $this->scripts[$key];
        unset( $deps[$key] );
    }

    private function flattern( &$deps, &$out = array() ) {

        foreach( $deps as $key => $value ) {            
            empty($value) ? $this->_unset( $key, $deps, $out ) : $this->flattern( $deps[$key], $out );
        }
    }   

    function print_scripts() {

        if ( !$this->scripts ) return;

        $deps = array_map( array( $this, 'dependencies' ), $this->scripts );
        while ( $deps ) 
            $this->flattern( $deps, $js );

        foreach( $js as $key => $script ) {
            $script['data'] && printf( "<script> var %s = %s; </script>" . PHP_EOL, key( $script['data'] ), json_encode( current( $script['data'] ) ) );
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

вызов enqueue_script() функция для добавления сценария, установки souce и зависимостей на других сценариях, и дополнительных данных необходимых для скрипт.

$header = new mHeader();

$header->enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array( 'jquery' ) );
$header->enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' );
$header->enqueue_script( 'custom-script', '//custom-script.min.js', array( 'jquery-ui' ), array( 'mydata' => array( 'value' => 20 ) ) );

$header->print_scripts();

и print_scripts() метод приведенного выше примера отправит этот вывод:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

независимо от того, что сценарий "jquery" запрашивается после "jquery-ui", он печатается раньше, потому что он определен в "jquery-ui", что он зависит от "jquery". Дополнительные данные для "пользовательского скрипта" находятся внутри нового блока скрипта и помещаются перед ним, он содержит mydata объект, который содержит дополнительные данные, теперь доступен для "custom-script".


myPlugin.start($val); // tried this, didn't work    

он не работает, потому что $val не определено, что касается javascript, т. е. php ничего не выводил для $val. Попробуйте просмотреть источник в вашем браузере, и вот что вы увидите:

myPlugin.start(); // tried this, didn't work    

и

<?php myPlugin.start($val); ?> // this didn't work either

это не работает, потому что php попытается обработать myPlugin как константа, и когда это не удастся, он попытается рассматривать его как строку 'myPlugin' который он попытается объединить с выходом функции php start() и поскольку это не определено, это приведет к фатальной ошибке

и

 myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails

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

также вы должны отметить, что php out put небезопасен и должен быть отфильтрован с помощью json_encode()

редактировать

Потому Что Я не заметил отсутствующую скобку в myPlugin.start(<?=$val?> :-\

как указывает @Second Rikudo, чтобы он работал правильно $val необходимо будет содержать закрывающую скобку, например:$val="42);"

означает, что php теперь будет производить myPlugin.start(42); и будет работать, как ожидалось, при выполнении javascript


попробуй такое

<?php
    echo "<script> var x = ". json_encode($phpVariable)."</script>";
?>

--

- после попытки некоторое время Хотя это работает , однако это замедляет работу. поскольку php-это скрипт на стороне сервера, а javascript-на стороне пользователя.


Я вышел с простым методом назначения переменных JavaScript с помощью PHP.

он использует атрибуты данных HTML5 для хранения переменных PHP, а затем назначается JavaScript при загрузке страницы.

полный учебник можно найти здесь

пример:

<?php

$variable_1 = "QNimate";
$variable_2 = "QScutter";

?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

ее код JS

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

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

сначала установите источник скрипта непосредственно в файл PHP.

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

вы даже можете передать переменную обратно в файл PHP, например:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

затем в "your_php_file.в PHP":

<?php
// THIS IS A SIMPLE EXAMPLE
// it demonstrates one method of using the src attribute to link
// to a PHP file which can generate javascripts dynamically
// and share data between PHP and javascript
// you may take this learning example and develop it further
// relying on your own coding skills for validating data
// and avoiding errors, of course
header( 'content-type: text/javascript' );

// if you pass a $_GET variable from the javascript
// you should add code to validate your $_GET variable(s)

// you can add code to query a database
// using $_GET['var1'] or some other criteria

// you can add simple variable assignments
$value = 'some value';

// for the OP's needs (assumes the class object has been defined)
$val = $myService->getValue();

?>
function name() {
    // pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both php and javascript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = '<?php echo '"' . $val . '"'; ?>';
    var example2 = '<?php echo '"' . $value . '"'; ?>';
    var example3 = '<?php echo '"some other data"'; ?>';
    alert( example1 + ' / ' + example2 );
}
<?php
// you may even want to include additional files (.php or .js, etc)
@include 'local_path_to_some_other_js_file.js';
@include 'local_path_to_some_other_php_file.php';

exit;
?>

вот трюк:

  1. вот вам 'PHP' чтобы использовать эту переменную:

    <?php 
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
    
  2. Теперь у вас есть переменная JS с именем 'name', а вот это ваше 'Javascript' чтобы использовать эту переменную :

    <script>
         console.log("i am everywhere " + name);
    </script>
    

предположим, что переменная является числом, в таком случае, это проще!--11-->

<?PHP
$number = 4;

echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';

?>

выход:

<script>var number = 4;alert(number);</script>

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

<script>var number = abcd;alert(number);</script>

но в JavaScript это синтаксическая ошибка.

Итак, в php у нас есть вызов функции json_encode это кодирует строку в объект json.

<?PHP
$number = 'abcd';

echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';

?>

С abcd в json это "abcd",так это выглядит так:

<script>var number = "abcd";alert(number);</script>

вы можете использовать тот же метод для массивов:

<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];

echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';

?>

и ваш JavaScript выглядит так:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

вывод на консоль

enter image description here


после многих исследований я нашел самый простой способ легко передать все виды переменных.

в вашем PHP-скрипте у вас есть две переменные, и вы пытаетесь отправить их в свои js-скрипты:

$php_var1 ="Hello world;
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

в любом из ваших javascript, вызванных на Вашей странице, просто вызовите vars.

надеюсь, я помог кому-нибудь !


я предположу, что данные для передачи являются строкой.

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

Итак, мы вернулись к побегу. json_encode($string) работает если вы кодируете исходную строку как UTF-8 сначала, если она еще не, потому что json_encode требует данных UTF-8. Если строку в ISO-8859-1, то вы можете просто использовать json_encode(utf8_encode($string)); в противном случае вы всегда можете использовать iconv сначала выполните преобразование.

но есть большой gotcha. Если вы используете его в событиях, вам нужно запустить htmlspecialchars() о результате, чтобы сделать его правильным кодом. И тогда вы должны либо быть осторожны, чтобы использовать двойные кавычки, чтобы заключить событие, или всегда добавлять ENT_QUOTES в функции htmlspecialchars. Например:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";
, вы не могу использовать htmlspecialchars на обычном JS-коде (код заключен в <script>...</script> теги). Это делает использование этой функции склонной к ошибкам, забывая htmlspecialchars результат при написании кода события.

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

<?php

// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
    if ($encoding != 'UTF-8')
        $string = iconv($encoding, 'UTF-8', $string);
    $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
    $string = substr(json_encode($string, $flags), 1, -1);
    return "'$string'";
}

функция требует PHP 5.4+. Пример использования:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

как в коде

<$php
     $val = $myService->getValue(); // makes an api and db call
     echo '<span id="value">'.$val.'</span>';
$>

теперь вы можете получить значение с помощью DOM, использовать innerHTML идентификатора span, в этом случае вам не нужно делать никаких вызовов на сервер, или ajax или любую другую вещь.

ваша страница будет печатать его с помощью php, и вы javascript получите значение с помощью DOM.


вот как я это делаю (есть много способов):

  1. преобразование данных в JSON
  2. вызов AJAX получать JSON
  3. преобразование JSON на в JavaScript объект

пример:

Шаг 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname="";
   $conn = new mysqli($servername, $username, $password,$dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name ,image FROM phone";
   $result = $conn->query($sql);

   while($row =$result->fetch_assoc()){ 
      $v[]=$row;    
   }

  echo json_encode($v);

  $conn->close();
?>

Шаг 2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p=JSON.parse(this.responseText);}
       }
    }

    <?php 
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";  
    ?>

и это сработает. Это просто назначение переменной javascript, а затем передача значения существующей переменной php. Поскольку php пишет строки javascript здесь, он имеет значение переменной php и может передавать ее напрямую.


для тех, у кого есть некоторые проблемы с использованием ниже кода, и он продолжает показывать <?php echo $username?> или что-то вроде этого.Идем редактировать файл httpd.conf в разделе mime_module добавьте это приложение AddType / x-httpd-php .формат html.НТМ, потому что он может отключить по умолчанию.

   <?php
        $username = 1;
    ?>

    <script type="text/javascript">
        var myData = <?php echo $username ?>;
        console.log(myData);
        alert(myData);
    </script>