PHP에서 JavaScript로 변수와 데이터를 어떻게 전달합니까?
PHP에 변수가 있고 JavaScript 코드에 그 값이 필요합니다. PHP에서 JavaScript로 내 변수를 가져 오려면 어떻게해야합니까?
다음과 같은 코드가 있습니다.
<?php
...
$val = $myService->getValue(); // Makes an API and database call
?>
val다음과 같은 내용 이 필요 하고 보이는 JavaScript 코드가 있습니다 .
<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>
답변
이를 수행하는 데 실제로 몇 가지 접근 방식이 있습니다. 일부는 다른 것보다 더 많은 오버 헤드를 필요로하고 일부는 다른 것보다 더 나은 것으로 간주됩니다.
특별한 순서없이 :
- AJAX를 사용하여 서버에서 필요한 데이터를 가져옵니다.
- 데이터를 페이지 어딘가에 에코하고 JavaScript를 사용하여 DOM에서 정보를 가져옵니다.
- 데이터를 JavaScript에 직접 에코합니다.
이 게시물에서는 위의 각 방법을 검토하고 각 방법의 장단점과 구현 방법을 살펴 봅니다.
1. AJAX를 사용하여 서버에서 필요한 데이터를 가져옵니다.
이 방법은 서버 측 스크립트와 클라이언트 측 스크립트가 완전히 분리되어 있기 때문에 최상의 방법으로 간주 됩니다 .
장점
- 계층 간 분리 개선 -내일 PHP 사용을 중단하고 서블릿, REST API 또는 기타 서비스로 이동하려는 경우 JavaScript 코드를 많이 변경할 필요가 없습니다.
- 더 가독성 -JavaScript는 JavaScript, PHP는 PHP입니다. 두 언어를 혼합하지 않으면 두 언어 모두에서 더 읽기 쉬운 코드를 얻을 수 있습니다.
- 비동기 데이터 전송 허용 -PHP에서 정보를 가져 오는 것은 시간 / 자원 비용이 많이들 수 있습니다. 때로는 정보를 기다리고, 페이지를로드하고, 정보가 언제든 도달하도록하고 싶지 않을 때가 있습니다.
- 마크 업에서 데이터를 직접 찾을 수 없음 -이는 마크 업에 추가 데이터가없는 상태로 유지되고 JavaScript 만 해당 데이터를 볼 수 있음을 의미합니다.
단점
- 대기 시간 -AJAX는 HTTP 요청을 생성하고 HTTP 요청은 네트워크를 통해 전달되며 네트워크 대기 시간이 있습니다.
- 상태 -별도의 HTTP 요청을 통해 가져온 데이터에는 HTML 문서를 가져온 HTTP 요청의 정보가 포함되지 않습니다. 이 정보 (예 : 양식 제출에 대한 응답으로 HTML 문서가 생성 된 경우)가 필요할 수 있으며, 그렇다면 어떻게 든이를 통해 전송해야합니다. 페이지에 데이터를 포함하는 것을 배제한 경우 (이 기술을 사용하는 경우 보유하고 있음) 경쟁 조건이 적용될 수있는 쿠키 / 세션으로 제한됩니다.
구현 예
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보다 덜 선호되지만 여전히 장점이 있습니다. JavaScript에 직접 PHP가 없다는 점에서 여전히 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 -->
행운을 빕니다!
더 간단한 대답을 시도해 보겠습니다.
문제에 대한 설명
먼저 서버에서 페이지가 제공 될 때 이벤트의 흐름을 이해하겠습니다.
- 첫 번째 PHP가 실행되면 클라이언트에 제공되는 HTML이 생성됩니다.
- 그런 다음 HTML이 클라이언트에 전달되고, PHP가 완료되면 코드가 서버를 떠나면 PHP가 완료되어 더 이상 액세스 할 수 없다는 점을 강조하고 싶습니다.
- 그런 다음 JavaScript가있는 HTML이 해당 HTML에서 JavaScript를 실행할 수있는 클라이언트에 도달합니다.
따라서 여기서 기억해야 할 핵심은 HTTP가 상태 비 저장이라는 것 입니다. 요청이 서버를 떠나면 서버는이를 건드릴 수 없습니다. 따라서 우리의 옵션은 다음과 같습니다.
- 초기 요청이 완료된 후 클라이언트에서 더 많은 요청을 보냅니다 .
- 서버가 초기 요청에서 말한 내용을 인코딩합니다.
솔루션
이것이 당신이 스스로에게 물어봐야 할 핵심 질문입니다.
웹 사이트 나 신청서를 작성하고 있습니까?
웹 사이트는 주로 페이지 기반이며 페이지로드 시간은 최대한 빨라야합니다 (예 : Wikipedia). 웹 애플리케이션은 AJAX가 더 많으며 클라이언트 빠른 정보를 얻기 위해 많은 왕복을 수행합니다 (예 : 재고 대시 보드).
웹 사이트
초기 요청이 완료된 후 클라이언트에서 더 많은 요청을 보내는 것은 상당한 오버 헤드가있는 더 많은 HTTP 요청이 필요하기 때문에 느립니다 . 또한 AJAX 요청을 작성하려면 완료 될 때 처리기가 필요하므로 비동기 성 이 필요합니다 .
나는 것 없는 또 다른 요청을 추천 사이트 응용 프로그램이 아닌 서버에서 해당 정보를 얻기 위해.
변환 및로드 시간에 큰 영향을 미치는 빠른 응답 시간을 원합니다 . 이 경우 Ajax 요청을 작성하면 초기 가동 시간이 느리고 불필요합니다.
두 가지 방법으로 문제를 해결할 수 있습니다.
- 쿠키 설정 -쿠키는 서버와 클라이언트가 모두 읽을 수있는 HTTP 요청으로 전송되는 헤더입니다.
- 변수를 JSON으로 인코딩-JSON은 JavaScript 개체와 매우 유사하며 대부분의 JSON 개체는 유효한 JavaScript 변수입니다.
쿠키를 설정하는 것은 그리 어렵지 않습니다. 값을 지정하기 만하면됩니다.
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
그런 다음 다음을 사용하여 JavaScript로 읽을 수 있습니다 document.cookie.
여기에 짧은 손으로 굴린 파서가 있지만 바로 위에 링크 한 답변은 더 잘 테스트되었습니다.
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
cookies["MyCookie"] // Value set with PHP.
쿠키는 약간의 데이터에 유용합니다. 이것은 추적 서비스가 자주하는 일입니다.
더 많은 데이터가 있으면 대신 JavaScript 변수 내에서 JSON으로 인코딩 할 수 있습니다.
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
가정 $value되고 json_encode는 PHP 측에 수 (보통이다). 이 기술은 예를 들어 Stack Overflow가 채팅으로 수행하는 작업입니다 (PHP 대신 .NET 만 사용).
신청
애플리케이션을 작성하는 경우-갑자기 초기로드 시간이 애플리케이션의 지속적인 성능만큼 항상 중요하지는 않으며 데이터와 코드를 별도로로드하는 데 도움이됩니다.
내 대답은 여기에 어떻게 자바 스크립트에서 AJAX를 사용하여로드 데이터에 대한 설명 :
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 파일은 코드 나 레이아웃을 요청하는 대신 데이터를 요청하고 표시합니다. 이것은 더 깨끗하고 응용 프로그램이 높아짐에 따라 보상을 받기 시작합니다. 또한 우려 사항을 더 잘 분리하고 서버 측 기술을 사용하지 않고도 클라이언트 측 코드를 테스트 할 수 있습니다.
포스트 스크립트 : 당신은 할 필요가 매우 당신이 PHP에서 자바 스크립트 아무것도 주입 할 때 XSS 공격 벡터를 알고 있습니다. 값을 적절하게 이스케이프하기 가 매우 어렵고 상황에 따라 다릅니다. XSS를 다루는 방법을 잘 모르거나 모르는 경우이 OWASP 기사 , 이 기사 및 이 질문을 읽으십시오 .
저는 보통 HTML에서 data- * 속성을 사용합니다.
<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Variable "service" now contains the value of $myService->getValue();
});
});
</script>
이 예제는 jQuery를 사용하지만 다른 라이브러리 또는 바닐라 JavaScript에 맞게 조정할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset 에서 데이터 세트 속성에 대한 자세한 내용을 읽을 수 있습니다.
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode ()에는 다음이 필요합니다.
- PHP 5.2.0 이상
$PHPVarUTF-8, 유니 코드로 인코딩됩니다.
다음 방법 중 하나를 사용하십시오.
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
또는
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>
저는 WordPress가 대기열에 추가 및 지역화 기능을 사용하는 방식이 매우 마음에 들었습니다. 따라서 해당 모델에 따라 스크립트 종속성에 따라 페이지에 스크립트를 넣고 스크립트에 추가 데이터를 사용할 수있는 간단한 클래스를 작성했습니다.
class mHeader {
private $scripts = array();
/**
* @param string $id Unique script identifier
* @param string $src Script src attribute
* @param array $deps An array of dependencies ( script identifiers ).
* @param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array()) {
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
}
private function dependencies($script) {
if ($script['deps']) {
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
}
}
private function _unset($key, &$deps, &$out) {
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
}
private function flattern(&$deps, &$out = array()) {
foreach($deps as $key => $value) {
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
}
}
function print_scripts() {
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script) {
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
}
}
}
enqueue_script()함수에 대한 호출 은 스크립트 추가, 다른 스크립트에 대한 소스 및 종속성 설정, 스크립트에 필요한 추가 데이터를위한 것입니다.
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
그리고 print_scripts()위 예제의 메서드는 다음 출력을 보냅니다.
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
'jquery'스크립트가 'jquery-ui'뒤에 대기열에 들어간다는 사실과 상관없이 'jquery'에 의존하는 'jquery-ui'에 정의되어 있기 때문에 이전에 인쇄됩니다. 'custom-script'에 대한 추가 데이터는 새 스크립트 블록 내부에 있으며 그 앞에 배치되며 mydata, 이제 'custom-script'에서 사용할 수있는 추가 데이터를 보유하는 개체를 포함 합니다.
이 시도:
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
-
-이거 한동안 시도한 후
작동하지만 성능이 저하됩니다. PHP는 서버 측 스크립트이고 JavaScript는 사용자 측입니다.
myPlugin.start($val); // Tried this, didn't work
$valJavaScript에 관한 한 정의되지 않았기 때문에 작동하지 않습니다 . 즉, PHP 코드가 $val. 브라우저에서 소스를 확인하면 다음과 같은 내용이 표시됩니다.
myPlugin.start(); // I tried this, and it didn't work
과
<?php myPlugin.start($val); ?> // This didn't work either
이것은 PHP가 myPlugin상수 로 처리하려고 시도 하고 실패 'myPlugin'하면 PHP 함수의 출력과 연결하려고 시도 하는 문자열 로 처리하려고 시도하기 때문에 작동하지 않으며 start()정의되지 않았으므로 치명적인 결과를 생성합니다. 오류.
과
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
이것이 작동 할 가능성이 가장 높지만, PHP 코드는 예상 인수로 유효한 JavaScript를 생성하므로 실패하면 myPlugin아직 준비되지 않았기 때문일 가능성이 있습니다 . 실행 순서를 확인하십시오.
또한 PHP 코드 출력은 안전하지 않으며 json_encode().
편집하다
myPlugin.start(<?=$val?>:-\ 에서 누락 된 괄호를 알지 못했기 때문에
@Second Rikudo가 지적했듯이 올바르게 작동 $val하려면 닫는 괄호를 포함해야합니다. 예를 들면 다음과 같습니다.$val="42);"
이는 PHP가 이제 myPlugin.start(42);JavaScript 코드에 의해 실행될 때 예상대로 생성 되고 작동 함을 의미합니다 .
PHP를 사용하여 JavaScript 변수를 할당하는 쉬운 방법이 나왔습니다.
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");
}
- 데이터를 JSON 으로 변환
- AJAX 를 호출 하여 JSON 파일 받기
- JSON 을 Javascript 객체 로 변환
예:
1 단계
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image FROM phone";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
$v[] = $row;
}
echo json_encode($v);
$conn->close();
?>
2 단계
function showUser(fnc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// STEP 3
var p = JSON.parse(this.responseText);
}
}
}
여기에 옵션으로 게시되지 않은 것이 있습니다. Ajax를 사용하는 것과 비슷하지만 분명히 다릅니다.
먼저 스크립트의 소스를 PHP 파일로 직접 설정합니다.
<script type="text/javascript" src="url_to_your_php_file.php" /></script>
다음 예제와 같이 변수를 PHP 파일에 다시 전달할 수도 있습니다.
<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>
그런 다음 "your_php_file.php"에서 :
<?php
// THIS IS A SIMPLE EXAMPLE
// it demonstrates one method of using the src attribute to link
// to a PHP file which can generate JavaScript code dynamically
// and share data between PHP and JavaScript
// you may take this learning example and develop it further
// relying on your own coding skills for validating data
// and avoiding errors, of course
header('content-type: text/javascript');
// If you pass a $_GET variable from the JavaScript
// you should add code to validate your $_GET variable(s)
// You can add code to query a database
// using $_GET['var1'] or some other criteria
// You can add simple variable assignments
$value = 'some value';
// For the OP's needs (assumes the class object has been defined)
$val = $myService->getValue();
?>
function name() {
// Pay attention because you need to use quotes properly
// and account for possible quotes in the variable strings
// to avoid both PHP and JavaScript errors
// example assumes $val has been returned as a string
// validate $val as needed using your method of choice
var example1 = <?php echo '"' . $val . '"'; ?>;
var example2 = <?php echo '"' . $value . '"'; ?>;
var example3 = <?php echo '"some other data"'; ?>;
alert( example1 + ' / ' + example2 );
}
<?php
// You may even want to include additional files (.php or .js, etc.)
@include 'local_path_to_some_other_js_file.js';
@include 'local_path_to_some_other_php_file.php';
exit;
?>
트릭은 다음과 같습니다.
해당 변수를 사용하는 'PHP' 는 다음과 같습니다 .
<?php $name = 'PHP variable'; echo '<script>'; echo 'var name = ' . json_encode($name) . ';'; echo '</script>'; ?>이제라는 JavaScript 변수
'name'가 있으며 해당 변수를 사용하는 JavaScript 코드는 다음과 같습니다.<script> console.log("I am everywhere " + name); </script>
변수가 항상 정수라고 가정 해 보겠습니다. 이 경우 더 쉽습니다.
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
출력 :
<script>var number = 4;alert(number);</script>
변수가 정수가 아니라고 가정 해 봅시다. 위의 방법을 시도하면 다음과 같은 결과를 얻을 수 있습니다.
<script>var number = abcd;alert(number);</script>
그러나 JavaScript에서 이것은 구문 오류입니다.
그래서 PHP에는 json_encode문자열을 JSON 객체로 인코딩 하는 함수 호출 이 있습니다.
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
이후 abcdJSON이에 "abcd", 그것은 다음과 같습니다 :
<script>var number = "abcd";alert(number);</script>
배열에 대해 동일한 방법을 사용할 수 있습니다.
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
그리고 JavaScript 코드는 다음과 같습니다.
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
콘솔 출력
많은 연구 끝에 가장 쉬운 방법은 모든 종류의 변수를 쉽게 전달하는 것입니다.
서버 스크립트에는 두 개의 변수가 있으며이를 클라이언트 스크립트로 보내려고합니다.
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
페이지에서 호출되는 JavaScript 코드에서 해당 변수를 호출하기 만하면됩니다.
전송할 데이터가 문자열이라고 가정하겠습니다.
다른 주석가들이 말했듯이 AJAX는 가능한 솔루션 중 하나이지만 단점이 장점보다 중요합니다. 지연 시간이 있고 프로그래밍하기가 더 어렵습니다 (서버 측과 클라이언트 측 모두 값을 검색하는 코드가 필요함). 이스케이프 기능으로 충분합니다.
그래서 우리는 탈출로 돌아 왔습니다. UTF-8 데이터가 필요 하기 때문에 소스 문자열을 UTF-8로 먼저 인코딩하면 json_encode($string)작동 합니다json_encode . 문자열이 ISO-8859-1에 있으면 간단히 사용할 수 있습니다 json_encode(utf8_encode($string)). 그렇지 않으면 항상 iconv먼저 변환을 수행하는 데 사용할 수 있습니다 .
그러나 큰 문제가 있습니다. 이벤트에서 사용하는 htmlspecialchars()경우 올바른 코드를 만들기 위해 결과에서 실행해야 합니다. 그런 다음 큰 따옴표를 사용하여 이벤트를 묶거나 항상 ENT_QUOTEShtmlspecialchars에 추가 해야합니다. 예를 들면 :
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
그러나 htmlspecialchars일반 JavaScript 코드 ( <script>... </script>태그로 묶인 코드) 에는 사용할 수 없습니다 . 이는 htmlspecialchars이벤트 코드를 작성할 때 결과 를 잊어 버리기 때문에 실수하기 쉬운이 함수를 사용 합니다.
문제가없는 함수를 작성할 수 있으며 이벤트를 항상 작은 따옴표로 묶거나 항상 큰 따옴표로 묶는 한 이벤트와 일반 JavaScript 코드에서 모두 사용할 수 있습니다. 여기 내 제안이 있는데, 이중 따옴표로 묶어야합니다.
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
이 함수는 PHP 5.4 이상이 필요합니다. 사용 예 :
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
코드에 따라
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
이제 DOM을 사용하여 값을 얻을 수 있고 스팬 ID의 innerHTML을 사용할 수 있습니다.이 경우 서버 나 Ajax 또는 다른 것을 호출 할 필요가 없습니다.
페이지는 PHP를 사용하여 인쇄하고 JavaScript는 DOM을 사용하여 값을 얻습니다.
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>