PHP 배열을 js에 전달하는 방법

프런트엔드와 백엔드 분리 추세가 계속 강화되면서 프런트엔드가 백엔드 데이터와 상호 작용해야 하는 경우가 점점 더 많아지고 있습니다. 이 경우 프런트엔드는 백엔드에서 처리한 데이터를 가져올 수 있어야 하며, 백엔드는 일반적으로 배열 형식으로 데이터를 반환합니다. 따라서 PHP 배열을 JS에 어떻게 전달하는가가 매우 중요한 문제가 되었습니다.

이 기사에서는 독자가 프런트엔드 및 백엔드 데이터와 상호 작용할 때 백엔드에서 반환된 데이터를 더 편리하게 얻고 처리할 수 있도록 PHP 배열을 전송하는 몇 가지 일반적인 방법을 소개합니다. 구체적인 방법은 다음과 같습니다.

방법 1: JSON 사용

현재 프론트엔드와 백엔드 데이터 상호작용을 위한 가장 일반적인 솔루션은 JSON을 사용하는 것입니다. JSON(JavaScript Object Notation)은 읽고 쓰기 쉽고 기계에서 쉽게 구문 분석하고 생성할 수 있는 경량 데이터 교환 형식이므로 데이터 교환에 매우 적합합니다. PHP에는 PHP 배열을 JSON 형식으로 변환한 다음 AJAX 기술을 사용하여 프런트 엔드로 전송하고 JSON.parse()를 사용하여 JavaScript가 직접 조작할 수 있는 객체로 변환할 수 있는 json_encode() 함수가 내장되어 있습니다. .

PHP 코드를 사용하여 배열을 JSON으로 변환:

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

프런트 엔드에서 AJAX를 사용하여 JSON 데이터 가져오기:

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

위 코드에서는 XMLHttpRequest 개체를 사용하여 서버에서 데이터를 요청하고 JSON을 사용합니다. .parse() 데이터를 가져오는 메서드 JSON 형식 문자열을 JavaScript 개체로 변환합니다.

방법 2: serialize() 및 unserialize() 사용

데이터를 전송할 때 데이터 구조를 고려할 필요가 없다면 serialize() 및 unserialize() 함수를 사용하는 것이 좋습니다.

serialize() 함수는 변수를 문자열로 직렬화하고, unserialize() 함수는 문자열을 원래 데이터 유형으로 복원할 수 있습니다. PHP에서는 serialize()를 사용하여 배열을 문자열로 직렬화한 다음 AJAX를 사용하여 데이터를 가져온 다음 역직렬화할 수 있습니다.

PHP 코드를 사용하여 배열 직렬화:

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$serializedData = serialize($myArray);

프런트 엔드에서 AJAX를 사용하여 직렬화된 문자열 가져오기:

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = request.responseText;
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

다음으로 unserialize() 메서드를 사용하여 이를 PHP 개체로 역직렬화할 수 있습니다.

$unserializedData = unserialize($serializedData);
print_r($unserializedData);

메서드 3: HTML5 데이터-* 속성을 사용하세요

간단한 데이터만 전송해야 하고 AJAX 요청을 사용할 필요가 없다면 HTML5 데이터- 속성을 통해 PHP 배열을 프런트엔드로 전달할 수 있습니다. data- 속성은 프런트 엔드에서 데이터 바인딩을 구현하기 위해 페이지 요소의 사용자 정의 데이터를 저장하는 데 사용할 수 있는 사용자 정의 속성입니다. 먼저 HTML 요소에 data-* 속성을 정의한 다음 데이터를 PHP에서 JSON 형식 문자열로 변환하고 마지막으로 PHP를 사용하여 이를 페이지에 출력할 수 있습니다.

PHP 코드를 사용하여 배열을 JSON으로 변환하고 이를 data-* 속성으로 출력합니다.

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

echo '
This is my div
';

다음으로 JavaScript를 통해 이 요소를 가져오고 data-json 속성을 JavaScript 개체로 구문 분석할 수 있습니다.

var myDiv = document.getElementById("myDiv");
var jsonData = JSON.parse(myDiv.dataset.json);
console.log(jsonData);

방법 4 : AjaxTransport 사용

때때로 프런트엔드 및 백엔드 데이터와 상호 작용할 때 백엔드 처리를 용이하게 하기 위해 일부 매개변수를 사용자 정의해야 합니다. 이 경우 jQuery에서 AjaxTransport를 사용할 수 있습니다. AjaxTransport를 사용하면 AJAX 요청을 보내기 전에 PHP 배열의 백엔드 처리를 용이하게 하기 위해 요청 헤더에 사용자 정의 매개변수를 추가하는 등 일부 사용자 정의 작업을 수행할 수 있습니다.

PHP 코드를 사용하여 배열을 JSON으로 변환합니다.

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

사용자가 AJAX 요청을 보낼 때 요청 헤더에 이 JSON 데이터를 추가할 수 있습니다.

$.ajaxTransport("+json", function(options, originalOptions, xhr) {
  xhr.setRequestHeader("X-JSON", json);
});

백엔드 PHP에서는 다음 위치에 사용자 정의 데이터를 추가할 수 있습니다. PHP 배열을 얻기 위해 매개변수 정의에 기반한 요청 헤더:

$myArray = json_decode($this->request->header('X-JSON'));

요약하자면, 다양한 방법을 사용하여 PHP 배열을 JavaScript로 전송할 수 있으며 특정 상황에 따라 가장 적절한 솔루션을 선택해야 합니다. 전체적으로 이러한 방법을 익히면 개발자는 프런트엔드 및 백엔드 데이터와 보다 유연하게 상호 작용하고 개발 효율성을 향상시킬 수 있습니다.

위 내용은 PHP 배열을 js에 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!