Як передати змінні та дані з PHP в JavaScript?


664

У мене є змінна в 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>

2
Чи було відсутнє дужки, що закриваються, myPlugin.start(<?=$val?>навмисно? Чи правда, що «це працює іноді»?
andrew

2
Ну, це насправді був Бен, але скажемо лише, що якщо $ val це, "42)"то він буде працювати добре: D
Привид

Відповіді:


877

Насправді існує кілька підходів до цього. Деякі вимагають більше накладних витрат, ніж інші, а деякі вважаються кращими за інших.

Ні в якому конкретному порядку:

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

Плюси

  • Швидко - операції DOM часто швидкі, і ви можете зберігати та отримувати доступ до багатьох даних відносно швидко.

Мінуси

  • Потенційно несемантична розмітка - зазвичай трапляється те, що ви використовуєте якийсь тип <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

Це, мабуть, найлегше зрозуміти.

Плюси

  • Дуже легко реалізується - Для здійснення цього та розуміння потрібно дуже мало.
  • Не забруднене джерело - змінні виводяться безпосередньо в JavaScript, тому DOM не впливає.

Мінуси

  • Щільно з’єднайте PHP з вашою логікою даних - Оскільки PHP використовується в презентації, ви не можете розділити ці два чітко.

Приклад реалізації

Реалізація порівняно проста:

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

Удачі!


70
"PHP не має тривіальних функцій виходу JavaScript" - Що не так json_encode?
Квентін

34
Я не погоджуюся з "Сильно небезпечним !!" та "Структуровані дані важкі". Кодуйте дані як JSON ( зрештою, нотація JavaScript Object Notation), і там ви переходите!
el.pescado

14
А що з значною асинхронністю асинхронності складних витрат та кодів, що вводяться під час запиту AJAX? Під час роботи над легким веб-сайтом JavaScript - подання запиту AJAX є стомлюючим та не найкращим методом.
Бенджамін Груенбаум

8
@BenjaminGruenbaum - JS недійсний JSON не має значення. Я не можу придумати жоден JSON, який недійсний у JavaScript в правій частині завдання.
Квентін

7
@SecondRikudo У методі 3 цей приклад може вбити веб-сайт. Приклад: <?php $output = '<!--<script>'; echo json_encode($output); ?>. Детальніше див. У цьому питанні . Рішення: Використовуйте JSON_HEX_TAGдля втечі <та >(потрібно PHP 5.3.0).
Панг

90

Я спробую простіше відповісти:

Пояснення проблеми

Спочатку давайте розберемося з потоком подій, коли сторінка подається з нашого сервера:

  • Спочатку запускається 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.

Потім ви можете прочитати його за допомогою JavaScriptdocument.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 , це та це питання .


4
@cHao загалом - кодування визначаються як послідовність символів, а існування концептуальних об'єктів є філософським. Однак є такі речі, як об'єкти JSON, і вони визначаються граматикою JSON. {}є дійсним об’єктом JSON - див. json.org
Бенджамін

1
Якщо ви користуєтесь цим визначенням, то всі "об'єкти JSON" дійсні в JS.
cHao

1
@cHao зауважте тонкощі: JavaScript має своє поняття об'єкта, а JSON - своє поняття об'єкта - вони не однакові. Коли люди зловживають терміном "об'єкт JSON", вони мають на увазі об'єкт JS, де в землі JavaScript - JSON використовується як формат серіалізації даних, а об'єкти JSON з'являються всередині рядків (типу SQL-запитів на мовах на сервері). Однак у цій відповіді метод JSON спирається на те, що більшість об'єктів JSON також є дійсним об’єктом JavaScript, тому ми записуємо JSON-об'єкт у код JavaScript.
Бенджамін Грюенбаум

1
@cHao Ах, але я вчора передбачив цей момент :) stackoverflow.com/questions/23752156/…
Бенджамін Груенбаум

2
Гаразд, ти мене туди завів. :) Це все ще безпечно; Поведінка PHP за замовчуванням полягає у тому, щоб уникнути таких символів (поряд з іншими символами, що не належать до ASCII), тому вони ніколи не пробиваються у вихід, крім як \u2028тощо. Вам доведеться прямо сказати, щоб цього не робити.
cHao

85

Зазвичай я використовую атрибути 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


4
Я погоджуюся, не бажаючи надмірно аналізувати та впроваджувати фантазійне рішення простої проблеми. Цей метод відокремлює PHP від ​​Javascript, так що PHP все ще генерує лише HTML, тоді як Javascript може бути зовнішнім для PHP-файлу.
alds

2
Я згоден, це найкращий варіант. Він вирішує всі питання безпеки, без затримок. Ви можете залишати JS повністю на своїх HTML-сторінках. HTML повинен обслуговуватися сервером додатків, але JS (і CSS) - ні. Це також більш семантично.
Райан

1
@Quentin Вам слід уникати ВСІХ вихідних даних, якщо тільки вихід не є самим HTML.
yuikonnu

2
@asdasd - Ну так, я просто вирішував конкретну проблему з кодом у вашій відповіді, а не загальну справу.
Квентін

1
@kanji - немає найкращої практики; divдобре, але ви можете використовувати будь-який тег, який вам подобається; має бути в тому, bodyщо.
Тімм

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

json_encode () вимагає:

  • PHP 5.2.0 або більше
  • $PHPVar кодується як UTF-8, Unicode.

19

Просто скористайтеся одним із наступних методів.

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

4
Яку цінність додає наявна відповідь?
Бенджамін Грюенбаум

5
Зберігаючи це просто і прямо. Для всіх користувачів, які мають багато часу, щоб заглибитись у глибокі пояснення
розібратися


Це може бути дурним питанням, але я абсолютно новий у світі PHP. Як тільки ми запишемо вищевказаний код у файл .php, як я можу отримати доступ до "js_variable" у своєму файлі JavaScript або моєму файлі "index.html"?
Анкіт Праджапаті

@AnkitPrajapati Спробуйте отримати доступ до нього, перевіривши стан готового документа. Використовуючи наступний сценарій. document.onreadystatechange = () => { if (document.readyState === 'complete') { // document ready alert(js_variable) } };
Нішант Мендіратта

11

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

$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'.


10

Спробуйте це:

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

-

-Песля спробую це на деякий час

Хоча це працює, проте він уповільнює продуктивність. Оскільки PHP - це серверний скрипт, а JavaScript - це користувач.


4
Ми шукаємо довгі відповіді, які дають певні пояснення та контекст. Не просто дайте однорядну відповідь; поясніть, чому ваша відповідь правильна, в ідеалі - цитатами. Відповіді, які не містять пояснень, можуть бути видалені. Про це написано на запитання.
Привид

3
нічого особливого для пояснення запишіть свою змінну php в <скрипт тегу>, що перегукується в PHP-коді
Yosra Nagati

5
Ти впевнений? Ви бачили верхню відповідь на це питання? Це пояснює зовсім небагато. Не кажучи вже про те, що ваше рішення не є безпечним. $phpVariable = '42"; alert("I am evil!");';
Привид

9
це моя пропозиція, яка вирішила мою проблему, і я не знаходжу її в попередніх відповідях, тому я додав, сподіваюся, що хтось вважає це цікавим
Yosra Nagati

1
сюди додається ехо для друку на веб-сторінці із цим кодом php або це лише частина синтаксису для введення даних у змінну js. @ YosraNagati
SUMIT KUMAR SINGH

8
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().

EDIT

Оскільки я не помітив відсутніх дужок у myPlugin.start(<?=$val?>: - \

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

Це означає, що PHP тепер буде вироблятись myPlugin.start(42);і працюватиме так, як очікувалося при виконанні коду JavaScript.


JSON кодує ваші дані:myPlugin.start(<?=json_encode($val)?>);
kingprawn

6

У мене вийшов простий метод призначити 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");
}

2
Незважаючи на те, що атрибути даних є розумним рішенням проблеми, у вас виникає аналогічна проблема з оригінальним запитанням, якщо ви не уникаєте даних у них. Просто потрібно уникати їх для HTML замість JS.
Квентін

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

5

Ось такий, який я не вважаю розміщеним як варіант. Це схоже на використання 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;
?>

Оскільки змінна існує в сценарії PHP, який генерує HTML, ви пропустили важливий крок динамічного генерування var1=value1. Так як ваш сценарій зламається, якщо дані включають 'символ.
Квентін

@Quentin код ПРИКЛАД працює без помилок, як представлено. це демонструвати використання. якщо програміст так далеко кодує, вони зрозуміють наслідки одновитрат / подвійних лапок у змінних $ _GET - які в будь-якому випадку повинні бути закодовані. var1 != [some HTML code]... ЧИСТО var1=="value1". відверто кажучи, ви неправі, що я щось пропустив. сценарій ПРИКЛАД завершений, і, як ви бачите, не генерує жодного HTML - і ОП не згадував HTML. це не заслуговує поводження деяким тригером, щасливим обходом
втягнення нижньою

Код у питанні демонструє, що ОП не розуміє котирування / уникнення. Нерозуміння цього питання - вся проблема! Хоча приклад завершений, це не приклад того, як вирішити проблему, виражену в питанні.
Квентін

@Quentin як саме ОП демонструє, що вони не розуміють котирування / втечі? це ПРИКЛАД, як вирішити проблему, тому що ОП запитав, як отримати дані PHP до javascript - мій приклад - один метод, який не відзначався в жодних інших відповідях
aequalsb

З цим фрагментом коду, який не робить нічого, щоб уникнути чи кодувати, $valі який іноді працює, а іноді й не:myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
Квентін,

3

Ось трюк:

  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>

Чи є спосіб отримати його, щоб він насправді не друкував у вихідний код? У мене є масивний масив, який я проходжу, і він забиває джерело.
Вільям Хоулі

1
Чи можете ви навести приклад тестового випадку?
Рамін Тагізада

Хіба це не те ж саме, що "3. Ехові дані безпосередньо в JavaScript" у цій відповіді ? Це виглядає ще краще.
kanji

3

Скажімо, ваша змінна завжди ціла. У цьому випадку це простіше:

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

Вихід консолі

Введіть тут опис зображення


2

Після довгих досліджень я знайшов найпростіший метод - легко передавати всі види змінних.

У серверному скрипті у вас є дві змінні, і ви намагаєтесь надіслати їх до сценарію клієнта:

$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, який називається на сторінці, просто зателефонуйте до цих змінних.


1

Я припускаю, що дані для передачі - це рядок.

Як заявили інші коментатори, 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>';

0

Відповідно до вашого коду

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

Тепер ви можете отримати значення за допомогою DOM, використовувати innerHTML span id, в цьому випадку вам не потрібно робити жодного дзвінка на сервер, або Ajax або іншу річ.

Ваша сторінка буде надрукувати її за допомогою PHP, а ви отримаєте значення JavaScript за допомогою DOM.


Цей код є вразливим для XSS, оскільки він не уникає символів, таких як <і >. Також подібні рішення вже були запропоновані.
Michał Perłakowski

0
<?php

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

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

?>

0

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'] + ".");

ВИХІД

Яблуневий колір жовтий, полуничний колір - червоний, а ківі - зелений.


-2

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

<?php
    $username = 1;
?>

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

@MadaraUchiha Ви можете пояснити, чому?
Микита 웃

3
Тому що якщо $username === "hello", то у вас є, var myData = hello;що зламається жахливо.
Привид

-2

Використання:

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

і це спрацює. Це просто призначення змінної JavaScript, а потім передача значення існуючої змінної PHP. Оскільки PHP пише сюди рядки JavaScript, воно має значення змінної PHP і може передавати його безпосередньо.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.