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

특별한 순서는 없습니다 :

1. AJAX를 사용하여 서버에서 필요한 데이터를 가져옵니다.
2. 데이터를 페이지 어딘가에 에코하고 JavaScript를 사용하여 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. 데이터를 페이지 어딘가에 에코하고 JavaScript를 사용하여 DOM에서 정보를 가져옵니다.

이 방법은 AJAX보다 덜 바람직하지만 여전히 장점이 있습니다. 그것은 여전히 상대적으로 자바 스크립트에서 직접에는 PHP가 없다는 것을 의미에서 PHP와 자바 스크립트 사이에 분리.

찬성

• 빠름 -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 -->

행운을 빕니다!

답변

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

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.

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

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

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

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

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

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

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

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

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

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

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