У меня есть переменная в 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>

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

В произвольном порядке:

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 получает эти выходные данные:

получить-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об окончании загрузки файла.

Еще немного материала для чтения

• Использование XMLHttpRequest - MDN
• Ссылка на объект XMLHttpRequest - MDN
• Как мне вернуть ответ от асинхронного вызова?

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

Удачи!

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

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

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

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

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

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

Решения

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

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

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

Веб-сайт

Посылка большего количества запросов от клиента после того, как начальный запрос сделан, медленна, поскольку это требует большего количества запросов 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.

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

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

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

Предполагая $value, json_encodeможет на стороне PHP (обычно это так). Эта техника - то, что Stack Overflow делает, например, со своим чатом (только с использованием .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 database call
     echo json_encode($val); // Write it to the output
 $>

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

Постскриптум: вы должны очень хорошо знать векторы атак 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');

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

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

Вы можете прочитать больше о свойстве набора данных здесь: 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 работает с функциями создания и локализации , поэтому, следуя этой модели, я написал простой класс для размещения сценариев на странице в соответствии с зависимостями сценариев и для предоставления дополнительных данных для сценария.

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()функции предназначен для добавления сценария, установки источника и зависимостей от других сценариев, а также дополнительных данных, необходимых для сценария.

$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». Дополнительные данные для «custom-script» находятся внутри нового блока сценария и помещены перед ним, он содержит mydataобъект, который содержит дополнительные данные, теперь доступные для «custom-script».

Попробуй это:

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

-

-После попытки это некоторое время

Хотя это работает, однако это замедляет производительность. Так как PHP - это серверный скрипт, а JavaScript - это пользовательская.

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

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

myPlugin.start(); // I tried this, and it 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-кода небезопасен и должен фильтроваться json_encode().

РЕДАКТИРОВАТЬ

Потому что я не заметил пропущенных скобок в myPlugin.start(<?=$val?>:

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

Это означает, что PHP теперь будет производить myPlugin.start(42);и будет работать так, как ожидается, при выполнении кода 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

Вот код JavaScript

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");
}

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);
      }
   }
}

Вот тот, который я не вижу в качестве опции. Это похоже на использование 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 JavaScript code 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. Теперь у вас есть переменная JavaScript 'name', и вот ваш код JavaScript для использования этой переменной:

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

Допустим, ваша переменная всегда целочисленная. В этом случае это проще:

<?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>

Консольный вывод

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

В сценарии сервера у вас есть две переменные, и вы пытаетесь отправить их клиентским сценариям:

$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, который вызывается на странице, просто вызывайте эти переменные.

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

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

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

Но есть большая ошибка. Если вы используете его в событиях, вам нужно запустить 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обычный код JavaScript (код, заключенный в <script>... </script>теги). Это делает использование этой функции склонной к ошибкам, забывая htmlspecialcharsрезультат при написании кода события.

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

<?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 database call
     echo '<span id="value">'.$val.'</span>';
$>

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

Ваша страница напечатает его с помощью PHP, а ваш JavaScript получит значение с помощью DOM.

<?php

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

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (yourexternal.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

ВЫВОД

Цвет яблока желтый, цвет клубники красный, а цвет киви зеленый.

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

<?php
    $username = 1;
?>

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

Использование:

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

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