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가 해당 출력을 가져오는 페이지입니다.

data.php 가져오기

으아악

index.php (또는 실제 페이지의 이름이 무엇이든)

으아악

위 두 파일을 조합하면 파일 로딩이 완료되면 경고음이 울립니다 42.

더 많은 자료

• 가져오기 API 사용
• an-ajax 호출에서 비동기 호출로 응답을 반환하는 방법은 무엇입니까?

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

이 방법은 AJAX만큼 좋지는 않지만 여전히 장점이 있습니다. JavaScript에는 직접적인 PHP가 없다는 점에서 PHP와 JavaScript 사이에는 여전히 상대적 분리가 있습니다.

장점

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

단점

• 잠재적으로 의미가 없는 마크업 - 일반적으로 특정 요소와 연결될 수 있는 JavaScript를 사용하여 읽을 수 있는 데이터에 대해 일종의 来存储信息，因为获取信息更容易超出 inputNode.value，但这样做意味着 HTML 中存在无意义的元素。 HTML 具有用于表示有关文档的数据的 元素，并且 HTML 5 引入了 data-* 속성을 사용하게 됩니다.
• 소스 코드 혼란 - PHP에서 생성된 데이터는 HTML 소스 코드로 직접 출력됩니다. 즉, 더 크고 덜 집중된 HTML 소스 코드를 얻게 됩니다.
• 구조화된 데이터를 얻기가 더 어렵습니다 - 구조화된 데이터는 유효한 HTML이어야 합니다. 그렇지 않으면 문자열을 직접 이스케이프하고 변환해야 합니다.
• PHP와 데이터 로직의 긴밀한 결합 - PHP는 프레젠테이션에 사용되므로 둘을 완전히 분리할 수는 없습니다.

구현예

이를 통해 사용자에게는 표시되지 않지만 JavaScript에는 표시되는 일종의 요소를 만드는 것이 아이디어입니다.

index.php

으아악

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

이것이 아마도 가장 이해하기 쉬울 것입니다.

장점

• 구현이 매우 쉽습니다 - 구현하고 이해하는 데 시간이 거의 걸리지 않습니다.
• 오염 없음 - 변수가 JavaScript로 직접 출력되므로 DOM이 영향을 받지 않습니다.

단점

• PHP와 데이터 로직의 긴밀한 결합 - PHP는 프레젠테이션에 사용되므로 둘을 완전히 분리할 수는 없습니다.

구현예

구현은 비교적 간단합니다.

으아악

행운을 빕니다!