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

Question

PHP에 변수가 있는데 JavaScript 코드에서 그 값을 사용해야 합니다. PHP에서 JavaScript로 변수를 어떻게 전달할 수 있나요?

다음 코드가 있습니다:

<?php
$val = $myService->getValue() // API 및 데이터베이스 호출 수행

같은 페이지에 $val 변수의 값을 매개변수로 전달해야 하는 JavaScript 코드가 있습니다.

<script>
    myPlugin.start($val); // 이것을 시도했지만 작동하지 않았습니다.
    <?php myPlugin.start($val) ?>
    myPlugin.start(<?=$val?>); // 작동할 때도 있지만 실패할 때도 있습니다.
</스크립트>

Answer 1

저는 보통 HTML에서 data-* 속성을 사용합니다.

으아악

이 예제에서는 jQuery를 사용하지만 다른 라이브러리나 기본 JavaScript에 적용할 수 있습니다.

여기에서 데이터 세트 속성에 대한 자세한 내용을 읽을 수 있습니다: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 2

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

특별한 순서는 없습니다:

1. AJAX를 사용하여 서버에서 필요한 데이터를 가져옵니다.
2. 페이지의 특정 위치에 데이터를 에코하고 JavaScript를 사용하여 DOM에서 정보를 가져옵니다.
3. 데이터를 JavaScript로 직접 에코합니다.

이 글에서는 위의 각 방법의 장단점과 구현 방법을 자세히 설명합니다.

1. AJAX를 사용하여 서버에서 필요한 데이터를 가져옵니다

이 접근 방식은 서버측 스크립트와 클라이언트측 스크립트가 완전히 분리되어기 때문에 가장 좋은 것으로 간주됩니다.

장점

• 레이어 간 분리 개선 - 내일 PHP 사용을 중단하고 서블릿, REST API 또는 기타 서비스로 이동하려는 경우 JavaScript 코드를 많이 변경할 필요가 없습니다.
• 읽기 쉬워졌습니다 - JavaScript는 JavaScript이고 PHP는 PHP입니다. 두 가지를 혼합하지 않으면 더 읽기 쉬운 코드를 얻을 수 있습니다.
• 비동기 데이터 전송 허용 - PHP에서 정보를 얻는 데는 시간과 리소스가 많이 소요될 수 있습니다. 때로는 정보를 기다리지 않고 페이지를 로드한 다음 정보가 도착하면 가져오고 싶지 않을 때도 있습니다.
• 데이터가 마크업에 직접 표시되지 않습니다. - 이는 추가 데이터 없이 마크업이 깔끔하게 유지되고 JavaScript에만 표시된다는 의미입니다.

단점

• Delay - AJAX는 HTTP 요청을 생성하고 HTTP 요청은 네트워크를 통해 이동하며 네트워크 지연이 발생합니다.
• STATUS - 별도의 HTTP 요청을 통해 얻은 데이터에는 HTML 문서를 얻기 위한 HTTP 요청에서 얻은 정보가 포함되지 않습니다. 이 정보가 필요할 수 있으며(예: 양식 제출에 대한 응답으로 HTML 문서가 생성된 경우), 필요한 경우 어떻게든 이를 전송해야 합니다. 페이지에 데이터 삽입을 제외했다면(이 기술을 사용하는 경우 제외함) 경쟁 조건이 발생할 수 있는 쿠키/세션만 사용할 수 있습니다.

구현예

AJAX를 사용하려면 두 페이지가 필요합니다. 하나는 PHP가 출력을 생성하는 페이지이고 다른 하나는 JavaScript가 해당 출력을 가져오는 페이지입니다.

get-data.php

으아악

index.php (또는 실제 페이지 이름)

으아악

파일 로딩이 완료되면 위 두 파일의 조합이 팝업으로 뜹니다42.

더 많은 자료

• 가져오기 API 사용
• 비동기 호출에서 응답을 어떻게 반환하나요?

2. 페이지의 특정 위치에 데이터를 에코하고 JavaScript를 사용하여 DOM에서 정보를 가져옵니다

이 접근 방식은 AJAX보다 덜 바람직하지만 여전히 장점이 있습니다. 어떤 면에서는 PHP가 JavaScript에서 직접 사용되지 않기 때문에 여전히 상대적으로 PHP와 JavaScript가 분리되어 있습니다.

장점

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

단점

• 잠재적으로 의미가 없는 마크업 - 일반적으로 특정 요소의 JavaScript 관련 데이터에 일종의 <input type=hidden>来存储信息，因为从inputNode.value中获取信息更容易，但这样做意味着你的HTML中有一个无意义的元素。HTML有<meta>元素用于文档的数据，HTML 5引入了data-* 속성을 사용합니다.
• 소스 코드 정리 - PHP에서 생성된 데이터는 HTML 소스 코드로 직접 출력됩니다. 즉, 더 크고 덜 집중된 HTML 소스 코드를 얻게 됩니다.
• 구조화된 데이터를 얻기가 더 어렵습니다 - 구조화된 데이터는 유효한 HTML이어야 합니다. 그렇지 않으면 문자열을 직접 이스케이프하고 변환해야 합니다.
• PHP와 데이터 로직을 긴밀하게 결합 - PHP는 프리젠테이션에 사용되기 때문에 둘을 깔끔하게 분리할 수 있는 방법은 없습니다.

구현예

이 경우 사용자에게는 보이지 않지만 JavaScript에는 보이는 일종의 요소를 만들어야 합니다.

index.php

으아악

3. 데이터를 JavaScript로 직접 에코합니다

이것이 아마도 가장 이해하기 쉬운 방법일 것입니다.

장점

• 구현하기 매우 쉽습니다 - 이를 달성하는 데 드는 비용은 매우 낮고 이해하기 쉽습니다.
• 소스 코드 오염 없음 - 변수는 JavaScript로 직접 출력되므로