Spróbuję prostszej odpowiedzi:

Wyjaśnienie problemu

Najpierw zrozummy przebieg zdarzeń, gdy strona jest serwowana z naszego serwera:

• pierwsze PHP jest uruchomione, generuje HTML, który jest serwowany do klienta.
• następnie, HTML jest dostarczany do klienta, po PHP jest już z nim, chciałbym podkreślić, że gdy kod opuści serwer-PHP jest już z nim i nie ma dostępu do niego.
• wtedy HTML z JavaScript dociera do klienta, który może wykonać JavaScript na tym HTML.

Tak naprawdę, podstawową rzeczą do zapamiętania tutaj jest to, że HTTP jest bezstanowy. Gdy żądanie opuściło serwer, serwer nie może go dotknąć. Tak więc, pozostawia nam to opcje do:

1. Wyślij więcej żądań od Klienta po pierwsze żądanie zostanie wykonane.
2. Zakoduj to, co serwer miał do powiedzenia w pierwotnym żądaniu.

Rozwiązania

That ' s the core pytanie, które powinieneś sobie zadać to:

Piszę stronę internetową czy aplikację?

Strony internetowe są głównie oparte na stronach, a czas ładowania strony musi być jak najszybszy (na przykład-Wikipedia). Aplikacje internetowe są bardziej obciążone Ajaxem i wykonują wiele podróży w obie strony, aby uzyskać szybkie informacje o kliencie(na przykład-pulpit nawigacyjny).

Strona internetowa

Wysyłanie kolejnych żądań od klienta po wykonaniu pierwszego żądania jest powolne , ponieważ wymaga więcej żądań HTTP, które mają znaczny narzut. Co więcej, wymaga asynchroniczności, ponieważ wykonanie żądania AJAX wymaga obsługi po jego zakończeniu.

Ja bym Nie zalecał składanie kolejnej prośby chyba że Twoja strona jest aplikacją do uzyskania tych informacji z serwera.

Masz dwa sposoby rozwiązania problemu

• Ustaw plik cookie - pliki cookie to nagłówki wysyłane w żądaniach HTTP, które może odczytać zarówno serwer, jak i klient.
• Zakoduj zmienną jako JSON - JSON wygląda bardzo blisko obiektów JavaScript i większość obiektów JSON jest poprawnymi zmiennymi JavaScript.

Ustawienie pliku cookie nie jest naprawdę trudne, wystarczy przypisać go do wartość:

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

Następnie możesz odczytać go za pomocą JavaScript używając document.cookie:

Oto krótki Parser ręczny, ale odpowiedź, którą podlinkowałem tuż powyżej, ma lepiej Przetestowane:

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.

Ciasteczka są dobre dla małej ilości danych. To właśnie często robią usługi śledzenia.

Gdy mamy więcej danych, możemy je zakodować za pomocą JSON wewnątrz zmiennej JavaScript:

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

Zakładając, że $value jest json_encodeable po stronie PHP (zwykle jest). Technika ta jest co robi Stack Overflow ze swoim czatem na przykład (tylko używając. NET zamiast PHP).

Zastosowanie

Jeśli piszesz aplikację-nagle początkowy czas ładowania nie zawsze jest tak ważny jak bieżąca wydajność aplikacji, a ładowanie danych i kodu zaczyna się opłacać osobno.

Moja odpowiedź tutaj wyjaśnia, jak ładować dane za pomocą AJAX w 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();

Lub z jQuery:

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

Teraz serwer musi tylko zawiera /your/url trasę / plik, który zawiera kod, który chwyta Dane i robi coś z nimi, w Twoim przypadku:

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

W ten sposób nasz plik JavaScript pyta o Dane i pokazuje je zamiast pytać o kod lub układ. Jest to czystsze i zaczyna się opłacać, gdy aplikacja staje się wyższa. Jest to również lepsze rozdzielenie obaw i umożliwia testowanie kodu po stronie klienta bez żadnej technologii po stronie serwera, co jest kolejnym plusem.

Postscriptum: musisz bądź bardzo świadomy wektorów ataku XSS podczas wprowadzania czegokolwiek z PHP do JavaScript. Jest to bardzo trudne do właściwego ucieczki wartości i jest wrażliwe na kontekst. Jeśli nie wiesz, jak radzić sobie z XSS, lub nie wiesz o tym - przeczytaj ten artykuł OWASP, to pytanie i.

Zwykle używam atrybutów data - * w 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>

Ten przykład używa jQuery, ale może być dostosowany do innej biblioteki lub JavaScript vanilla.

Możesz przeczytać więcej o właściwościach dataset tutaj: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

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

Json_encode() wymaga:

• PHP 5.2.0 lub więcej
• $PHPVar zakodowany jako UTF-8, Unicode.

Wystarczy użyć jednej z poniższych metod.

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

Lub

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

Bardzo podoba mi się sposób, w jaki WordPress działa z jego enqueue i lokalizuje funkcje, więc podążając za tym modelem, napisałem prostą klasę do umieszczania skryptów na stronie zgodnie z zależnościami skryptu i do udostępniania dodatkowych danych dla skryptu.

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

Wywołanie funkcji enqueue_script() służy do dodania skryptu, ustawienia źródła i zależności od innych skryptów oraz dodatkowych danych potrzebnych do skryptu.

$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();

I, print_scripts() metoda powyższy przykład wyśle to wyjście:

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

Niezależnie od tego, że skrypt 'jquery' jest pytany po 'jQuery-ui', jest drukowany przed, ponieważ jest zdefiniowany w 'jquery-ui', że zależy od 'jquery'. Dodatkowe dane dla 'custom-script' znajdują się wewnątrz nowego bloku skryptów i są umieszczone przed nim, zawiera on obiekt mydata, który przechowuje dodatkowe dane, teraz dostępny dla 'custom-script'.

Spróbuj tego:

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

--

- po wypróbowaniu tego przez chwilę

Chociaż działa, to jednak spowalnia wydajność. Ponieważ PHP jest skryptem po stronie serwera, podczas gdy JavaScript jest stroną użytkownika.

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

Nie działa, ponieważ {[4] } jest niezdefiniowany, jeśli chodzi o JavaScript, tzn. kod PHP nie wypisał niczego dla $val. Spróbuj wyświetlić źródło w przeglądarce, a oto, co zobaczysz:

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

I

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

To nie działa, ponieważ PHP spróbuje traktować myPlugin jako stałą, a gdy to się nie powiedzie, spróbuje potraktować ją jako ciąg 'myPlugin', który spróbuje połączyć z wyjściem funkcji PHP start() i ponieważ jest niezdefiniowany spowoduje błąd krytyczny.

I

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

Chociaż to najprawdopodobniej zadziała, ponieważ kod PHP tworzy poprawny JavaScript z oczekiwanymi argumentami, jeśli się nie powiedzie, jest szansa, że myPlugin nie jest jeszcze gotowy. Sprawdź kolejność wykonania.

Należy również zauważyć, że wyjście kodu PHP jest niebezpieczne i powinno być filtrowane za pomocą json_encode().

EDIT

Ponieważ nie zauważyłem brakującego nawiasu w myPlugin.start(<?=$val?> :-\

Jako @Second Rikudo zwraca uwagę, że aby działało poprawnie $val musiałby zawierać nawias zamykający, na przykład: $val="42);"

Co oznacza, że PHP będzie teraz produkować myPlugin.start(42); i będzie działać zgodnie z oczekiwaniami po wykonaniu kodu JavaScript.

Wyszedłem z łatwą metodą przypisywania zmiennych JavaScript za pomocą PHP.

Używa atrybutów danych HTML5 do przechowywania zmiennych PHP, a następnie jest przypisywany do JavaScript podczas ładowania strony.

Kompletny samouczek można znaleźć tutaj .

Przykład:

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

Oto kod 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. Konwersja danych na JSON
2. wywołanie AJAX do odebrania JSON plik
3. Konwertuj JSON na Javascript obiekt

Przykład:

Krok 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();
?>

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

Tutaj nie widzę takiej opcji. Jest podobny do korzystania z Ajax, ale wyraźnie inny.

Najpierw ustaw źródło skryptu bezpośrednio do pliku PHP.

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

Możesz nawet przekazać zmienną z powrotem do pliku PHP, takiego jak ten przykład:

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

Następnie w "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;
?>

Oto sztuczka:

1. Oto twoje ' PHP ' aby użyć tej zmiennej:

   <?php
       $name = 'PHP variable';
       echo '<script>';
       echo 'var name = ' . json_encode($name) . ';';
       echo '</script>';
   ?>
   

2. Teraz masz zmienną JavaScript o nazwie 'name', A oto Twój kod JavaScript, aby użyć tej zmiennej:

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

Załóżmy, że Twoja zmienna jest zawsze liczbą całkowitą. W takim przypadku jest to łatwiejsze:

<?PHP
    $number = 4;

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

Wyjście :

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

Załóżmy, że Twoja zmienna nie jest liczbą całkowitą, ale jeśli spróbujesz powyższej metody, otrzymasz coś takiego:

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

Ale w JavaScript jest to błąd składni.

Więc w PHP mamy wywołanie funkcji json_encode, które koduje łańcuch znaków do obiektu JSON.

<?PHP
    $number = 'abcd';

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

Ponieważ abcd w JSON jest "abcd", wygląda to tak:

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

Możesz użyć ta sama metoda dla tablic:

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

A Twój kod JavaScript wygląda tak:

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

Wyjście konsoli

Po wielu badaniach odkryłem, że najprostszą metodą jest łatwe przekazywanie wszystkich rodzajów zmiennych.

W skrypcie serwera, masz dwie zmienne i próbujesz wysłać je do skryptów klienta:

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

W dowolnym kodzie JavaScript wywołanym na stronie, po prostu wywołaj te zmienne.

Zakładam, że dane do przesłania są ciągiem znaków.

Jak stwierdzili inni komentatorzy, AJAX jest jednym z możliwych rozwiązań, ale wady przeważają nad zaletami: ma opóźnienie i jest trudniejszy do zaprogramowania (potrzebuje kodu, aby odzyskać wartość zarówno po stronie serwera, jak i po stronie klienta), gdy prostsza funkcja ucieczki powinna wystarczyć.

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

Nie można jednak używać htmlspecialchars na zwykłym kodzie JavaScript (kod zamknięty w <script>...</script> tagi). To sprawia, że ta funkcja jest podatna na błędy, zapominając o htmlspecialchars wyniku podczas pisania kodu zdarzenia.

Możliwe jest napisanie funkcji, która nie ma tego problemu i może być używana zarówno w zdarzeniach, jak i w zwykłym kodzie JavaScript, pod warunkiem, że zdarzenia są zawsze w pojedynczych cudzysłowach lub zawsze w podwójnych cudzysłowach. Oto moja propozycja, wymagająca, aby były w podwójnych cudzysłowach (co wolę): {]}

<?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'";
    }

Funkcja wymaga PHP 5.4+. Przykład użycia:

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

Zgodnie z Twoim kodem

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

Teraz możesz uzyskać wartość używając DOM, użyj innerHTML z span id, w tym przypadku nie musisz wykonywać żadnych wywołań do serwera, Ajax lub innej rzeczy.

Twoja strona wydrukuje ją za pomocą PHP, a JavaScript otrzyma wartość za pomocą 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 (ty też.js)

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

Wyjście

Kolor jabłka jest żółty, kolor truskawek jest czerwony, a kiwi kolor zielony.

Użycie:

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