Jak przekazać zmienne i dane z PHP do JavaScript?
Mam zmienną w PHP, i potrzebuję jego wartości w moim kodzie JavaScript. Jak mogę pobrać moją zmienną z PHP do JavaScript?
Mam kod, który wygląda tak:
<?php
...
$val = $myService->getValue(); // Makes an API and database call
?>
Mam kod JavaScript, który potrzebuje val
i wygląda wzdłuż linii:
<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>
19 answers
Istnieje kilka sposobów, aby to zrobić. Niektóre wymagają więcej kosztów ogólnych niż inne, a niektóre są uważane za lepsze niż inne.
W żadnej szczególnej kolejności:
- użyj AJAX, aby uzyskać potrzebne dane z serwera.
- Echo danych do strony gdzieś, i użyj JavaScript, aby uzyskać informacje z DOM.
- Echo danych bezpośrednio do JavaScript.
1. Korzystanie z AJAX, aby uzyskać potrzebne dane z serwera
Ta metoda jest uważana za najlepszą, ponieważ skrypty po stronie serwera i po stronie klienta są całkowicie oddzielne .
Plusy
- lepsza separacja między warstwami - jeśli jutro przestaniesz używać PHP i chcesz przejść do servletu, REST API lub innej usługi, nie musisz zmieniać dużej części JavaScript kod.
- bardziej czytelny - JavaScript to JavaScript, PHP to PHP. Bez mieszania tych dwóch, można uzyskać bardziej czytelny kod w obu językach.
- pozwala na asynchroniczny transfer danych - pobieranie informacji z PHP może być kosztowne. Czasami po prostu nie chcesz czekać na informacje, załadować stronę i mieć dostęp do informacji kiedykolwiek.
- Dane nie znajdują się bezpośrednio na znacznikach - oznacza to, że Twoje znaczniki nie zawiera żadnych dodatkowych danych i widzi je tylko JavaScript.
Cons
- Latency - AJAX tworzy żądanie HTTP, a żądania HTTP są przenoszone przez Sieć i mają opóźnienia sieciowe.
- State - dane pobierane przez oddzielne żądanie HTTP nie będą zawierać żadnych informacji z żądania HTTP, które pobrało dokument HTML. Możesz potrzebować tych informacji (np. jeśli dokument HTML został wygenerowany w odpowiedzi na przesłanie formularza) a jeśli to zrobisz, będziesz musiał to jakoś przenieść. Jeśli wykluczyłeś osadzanie danych na stronie (które masz, jeśli używasz tej techniki), to ogranicza cię to do plików cookie / sesji, które mogą podlegać warunkom wyścigu.
Przykład Implementacji
Z Ajaxem, potrzebujesz dwóch stron, jedna to miejsce, gdzie PHP generuje wyjście, a druga to miejsce, gdzie JavaScript pobiera to wyjście:
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.
Indeks.php (czy jakakolwiek rzeczywista strona nosi nazwę like)
<!-- 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 -->
Powyższa kombinacja dwóch plików ostrzega 42
po zakończeniu ładowania pliku.
Więcej materiałów do czytania
- Korzystanie z XMLHttpRequest-MDN
- XMLHttpRequest object reference-MDN
- Jak zwrócić odpowiedź z połączenia asynchronicznego?
2. Echo danych do strony gdzieś, i użyć JavaScript, aby uzyskać informacje z DOM
Ta metoda jest mniej korzystna niż AJAX, ale nadal ma swoje zalety. Jest to wciąż względnie oddzielone między PHP i JavaScript w tym sensie, że nie ma PHP bezpośrednio w JavaScript.
Plusy
- Fast - operacje DOM są często szybkie i stosunkowo szybko można przechowywać i uzyskiwać dostęp do wielu danych.
Cons
-
potencjalnie Niemantyczne znaczniki - zazwyczaj, co zdarza się, że używasz pewnego rodzaju
<input type=hidden>
do przechowywania informacji, ponieważ łatwiej jest uzyskać informacje zinputNode.value
, ale oznacza to, że masz bezsensowny element w swoim HTML. HTML ma element<meta>
dla danych o dokumencie, a HTML 5 wprowadza atrybutydata-*
dla danych specjalnie do odczytu za pomocą JavaScript, które mogą być powiązane z poszczególnymi elementami. - brudzi źródło - dane generowane przez PHP są przesyłane bezpośrednio do HTML source, co oznacza, że otrzymujesz większe i mniej skupione źródło HTML.
- Harder to get structured data - dane strukturalne będą musiały być poprawne w formacie HTML, w przeciwnym razie będziesz musiał samodzielnie uciekać i konwertować ciągi.
- ściśle łączy PHP z Twoją logiką danych - ponieważ PHP jest używane w prezentacji, nie można ich oddzielić czysto.
Przykład Implementacji
[[9]]. chodzi o to, aby stworzyć jakiś element, który nie będzie wyświetlany użytkownikowi, ale jest widoczny dla JavaScript.Indeks.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. Echo danych bezpośrednio do JavaScript
To chyba najłatwiejsze do zrozumienia.Plusy
- bardzo łatwo zaimplementować - potrzeba bardzo niewiele, aby to zaimplementować i zrozumieć.
- Nie brudne źródło - zmienne są wyprowadzane bezpośrednio do JavaScript, więc DOM nie jest dotknięte.
Cons
- ściśle łączy PHP z Twoją logiką danych - ponieważ PHP jest używane w prezentacji, nie można ich oddzielić czysto.
Przykład Implementacji
Implementacja jest stosunkowo prosta:
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
Powodzenia!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-15 23:51:21
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:
- Wyślij więcej żądań od Klienta po pierwsze żądanie zostanie wykonane.
- 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.
Potrzebujesz szybkich czasów reakcji, które mająogromny wpływ na czasy konwersji i ładowania. Wykonywanie żądań Ajax jest powolne dla początkowego uptime w tym przypadku i niepotrzebne.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_encode
able 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-27 10:23:24
<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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-18 18:23:31
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-13 18:59:02
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'.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:10:58
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:04:30
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:01:02
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");
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:12:18
- Konwersja danych na JSON
- wywołanie AJAX do odebrania JSON plik
- 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);
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-28 12:35:57
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;
?>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-19 15:37:16
Oto sztuczka:
-
Oto twoje ' PHP ' aby użyć tej zmiennej:
<?php $name = 'PHP variable'; echo '<script>'; echo 'var name = ' . json_encode($name) . ';'; echo '</script>'; ?>
-
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:25:47
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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:30:38
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:31:35
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ć.
Więc wracamy do ucieczki.json_encode($string)
działa Jeśli najpierw zakodujesz łańcuch źródłowy jako UTF-8, Jeśli jeszcze nie jest, ponieważ json_encode
wymaga Dane UTF-8. Jeśli ciąg znaków jest w ISO-8859-1, możesz po prostu użyć json_encode(utf8_encode($string))
; w przeciwnym razie zawsze możesz użyć iconv
, aby wykonać konwersję jako pierwszy.
/ Align = "left" / Jeśli używasz go w zdarzeniach, musisz uruchomić htmlspecialchars()
NA wyniku, aby uzyskać poprawny kod. Następnie musisz albo uważać, aby użyć podwójnych cudzysłowów do zamknięcia zdarzenia, albo zawsze dodać {[8] } do htmlspecialchars. Na przykład:
<?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>';
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:24:14
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:15:54
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-19 16:25:09
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-30 16:02:43
Użycie:
<?php
$your_php_variable= 22;
echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>
I to zadziała. To po prostu przypisanie zmiennej JavaScript, a następnie przekazanie wartości istniejącej zmiennej PHP. Ponieważ PHP pisze tutaj wiersze JavaScript, ma wartość zmiennej PHP i może przekazać ją bezpośrednio.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-16 00:27:40