Jak przekazać zmienne i dane z PHP do JavaScript?
Mam zmienną w PHP i potrzebuję jej 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 db call
?>
Mam kod JavaScript, który potrzebuje val
i wygląda wzdłuż linii:
<script>
myPlugin.start($val); // tried this, didn't work
<?php myPlugin.start($val); ?> // this didn't work either
myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
</script>
18 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 są utrzymywane w czystości żadnych dodatkowych danych, a 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) oraz, 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 aktualna strona nazywa się jak)
<!-- 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 z JS, które mogą być powiązane z konkretnymi elementami. - brudzi źródło - dane generowane przez PHP są przesyłane bezpośrednio do źródła HTML, oznacza to, że otrzymujesz większe i mniej skoncentrowane ź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
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
Jest to prawdopodobnie najłatwiejsze do zrozumienia i najokropniejsze w użyciu. Nie rób tego, dopóki nie wiesz, co robisz.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 ma wpływu.
Cons
- niepewne - PHP nie ma trywialnych funkcji ucieczki JavaScript i nie są trywialne do wdrożenia. Szczególnie podczas korzystania z wejść użytkownika, jesteś niezwykle podatny na zastrzyki drugiego poziomu. sporne Zobacz komentarze
- ściśle łączy PHP z Twoją logiką danych - ponieważ PHP jest używane w prezentacji, nie można ich oddzielić czysto.
- Dane strukturalne jest trudne - prawdopodobnie możesz zrobić JSON... tak jakby. Ale XML i HTML będą wymagały szczególnej uwagi.
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
2017-05-23 12:34:41
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ć JS 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
Oto podstawowe pytanie powinieneś zadać sobie pytanie:
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 czasu pracy w ta sprawa i niepotrzebna.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 zakodować je za pomocą JSON wewnątrz zmiennej JS:
<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 StackOverflow robi na przykład ze swoim czatem (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 i zaczyna się opłacać osobne ładowanie danych i kodu.
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
trasa / plik zawierający kod, który chwyta Dane i robi z nimi coś, w Twoim przypadku:
<$php
...
$val = myService->getValue(); // makes an api and db call
echo json_encode($val); // write it to the output
$>
W ten sposób nasz plik JS 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 być bardzo świadomi wektorów ataku XSS, gdy wstrzykniesz cokolwiek 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
2017-05-23 11:47:25
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');
// service variable 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
2017-12-15 14:02: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 souce 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ższego 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 mydata
obiekt, który przechowuje dodatkowe dane, teraz dostępny do '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
2014-10-29 20:24:58
myPlugin.start($val); // tried this, didn't work
Nie działa, ponieważ {[4] } jest niezdefiniowany, jeśli chodzi o javascript, tj. php nie wypisuje niczego dla $val
. Spróbuj wyświetlić źródło w przeglądarce, a oto, co zobaczysz:
myPlugin.start(); // tried this, 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 łańcuch 'myPlugin'
, który spróbuje połączyć z wyjściem funkcji php start()
i ponieważ jest niezdefiniowany, będzie on traktowany jako ciąg znaków 'myPlugin'
. generowanie błędu krytycznego
I
myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
Chociaż to najprawdopodobniej zadziała, ponieważ php produkuje poprawny javascript z oczekiwanymi argumentami, jeśli się nie powiedzie, są szanse, że myPlugin
nie jest jeszcze gotowy. Sprawdź kolejność wykonania.
Należy również zauważyć, że PHP out put jest niebezpieczne i powinno być filtrowane za pomocą json_encode()
EDIT
Ponieważ nie zauważyłem brakującego nawiasu w myPlugin.start(<?=$val?>
:-\
Jako @ Drugi Rikudo wskazuje, że aby działał poprawnie $val
musiałby zawierać nawias zamykający np: $val="42);"
Co oznacza, że php będzie teraz produkować myPlugin.start(42);
i będzie działać zgodnie z oczekiwaniami po wykonaniu przez 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
2014-05-20 14:58:30
Spróbuj tego
<?php
echo "<script> var x = ". json_encode($phpVariable)."</script>";
?>
--
- po wypróbowaniu tego przez chwilę Chociaż działa, 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
2015-12-15 13:40:08
Wyszedłem z łatwą metodą przypisywania zmiennych JavaScript za pomocą PHP.
Używa atrybutów danych HTML5 do przechowywania zmiennych PHP, a następnie przypisanych 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
Hers to kod JS
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
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-01-19 15:04:02
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 javascripts dynamically
// and share data between PHP and javascript
// you may take this learning example and develop it further
// relying on your own coding skills for validating data
// and avoiding errors, of course
header( 'content-type: text/javascript' );
// if you pass a $_GET variable from the javascript
// you should add code to validate your $_GET variable(s)
// you can add code to query a database
// using $_GET['var1'] or some other criteria
// you can add simple variable assignments
$value = 'some value';
// for the OP's needs (assumes the class object has been defined)
$val = $myService->getValue();
?>
function name() {
// pay attention because you need to use quotes properly
// and account for possible quotes in the variable strings
// to avoid both php and javascript errors
// example assumes $val has been returned as a string
// validate $val as needed using your method of choice
var example1 = '<?php echo '"' . $val . '"'; ?>';
var example2 = '<?php echo '"' . $value . '"'; ?>';
var example3 = '<?php echo '"some other data"'; ?>';
alert( example1 + ' / ' + example2 );
}
<?php
// you may even want to include additional files (.php or .js, etc)
@include 'local_path_to_some_other_js_file.js';
@include 'local_path_to_some_other_php_file.php';
exit;
?>
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-08-21 21:57:40
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ą JS o nazwie
'name'
, a tutaj masz '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
2018-09-15 00:29:29
Załóżmy, że Twoja zmienna jest zawsze całkowita, 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>';
?>
Od abcd
w json jest "abcd"
, więc wygląda to tak:
<script>var number = "abcd";alert(number);</script>
Możesz użyj tej samej metody 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 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
2018-07-08 14:52:58
Po wielu badaniach znalazłem najprostszą metodę, aby łatwo przekazać wszystkie rodzaje zmiennych.
W Twoim skrypcie php masz dwie zmienne i próbujesz wysłać je do swoich skryptów js:
$php_var1 ="Hello world;
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
W dowolnym javascript wywołanym na twojej stronie, po prostu zadzwoń do vars.
Mam nadzieję, że komuś pomogłem !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
2018-08-30 08:59:28
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żywać podwójnych cudzysłowów do zamknięcia zdarzenia, albo zawsze dodawać {[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 JS (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 JS, 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 sposób 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
2016-06-05 18:24:07
Zgodnie z Twoim kodem
<$php
$val = $myService->getValue(); // makes an api and db 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ć żadnego połączenia z serwerem, Ajaxem lub czymkolwiek innym.
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
2016-07-13 08:30:40
Tak to robię (jest wiele sposobów):
- 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
2018-07-19 13:02:31
<?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
2017-08-01 04:27:17
Dla tych, którzy mają jakiś problem z używaniem poniższego kodu i ciągle go pokazuje <?php echo $username?>
lub coś w tym stylu.Przejdź do edycji httpd.conf w sekcji mime_module przez add this ' AddType application / x-httpd-php .html .htm", ponieważ może domyślnie wyłączyć.
<?php
$username = 1;
?>
<script type="text/javascript">
var myData = <?php echo $username ?>;
console.log(myData);
alert(myData);
</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-12-21 16:39:54