PHP에서 JavaScript로 변수와 데이터를 전달 하는 방법

질문 : 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>

답변

---

실제로 이를 수행하는 몇 가지 접근 방식이 있습니다. 일부는 다른 것보다 더 많은 오버 헤드를 필요로하고 일부는 다른 것보다 더 나은 것으로 간주됩니다.

특별한 순서없이 :

1. AJAX를 사용하여 서버에서 필요한 데이터를 가져옵니다.
2. 데이터를 페이지 어딘가에 에코하고 자바스크립트를 사용하여 DOM에서 정보를 가져옵니다.
3. 데이터를 직접 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에 경고를 보냅니다.

좀 더 많은 읽을거리

• XMLHttpRequest 사용-MDN
• XMLHttpRequest 객체 참조-MDN
• 비동기 호출에서 응답을 어떻게 반환합니까?

 

2. 데이터를 페이지 어딘가에 에코하고, 자바스크립트를 사용하여 DOM에서 정보를 가져옵니다.

이 방법은 AJAX보다 덜 선호되지만 여전히 장점이 있습니다. JavaScript에 직접 PHP가 없다는 점에서 여전히 PHP와 JavaScript 사이에 상대적으로 분리되어 있습니다.

장점

• 빠름 -DOM 작업은 종종 빠르며 많은 데이터를 비교적 빠르게 저장하고 액세스 할 수 있습니다.

단점

• 잠재적으로 의미없는 마크 업 -일반적으로 어떤 종류의 <input type=hidden> 을 사용하여 정보를 저장하는 것입니다. inputNode.value 에서 정보를 가져 오는 것이 더 쉽기 때문입니다. 귀하의 HTML. HTML에는 문서에 대한 데이터에 대한 <meta> 요소가 있으며 HTML 5에는 특정 요소와 연관 될 수있는 JavaScript로 읽는 데이터에 대한 data-*
• 소스 더럽 히기 -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 -->

행운을 빕니다!

출처 : https://stackoverflow.com/questions/23740548/how-do-i-pass-variables-and-data-from-php-to-javascript