프런트엔드와 백엔드 분리 추세가 계속 강화되면서 프런트엔드가 백엔드 데이터와 상호 작용해야 하는 경우가 점점 더 많아지고 있습니다. 이 경우 프런트엔드는 백엔드에서 처리한 데이터를 가져올 수 있어야 하며, 백엔드는 일반적으로 배열 형식으로 데이터를 반환합니다. 따라서 PHP 배열을 JS에 어떻게 전달하는가가 매우 중요한 문제가 되었습니다.
이 기사에서는 독자가 프런트엔드 및 백엔드 데이터와 상호 작용할 때 백엔드에서 반환된 데이터를 더 편리하게 얻고 처리할 수 있도록 PHP 배열을 전송하는 몇 가지 일반적인 방법을 소개합니다. 구체적인 방법은 다음과 같습니다.
현재 프론트엔드와 백엔드 데이터 상호작용을 위한 가장 일반적인 솔루션은 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 개체로 변환합니다.
데이터를 전송할 때 데이터 구조를 고려할 필요가 없다면 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);
간단한 데이터만 전송해야 하고 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);
때때로 프런트엔드 및 백엔드 데이터와 상호 작용할 때 백엔드 처리를 용이하게 하기 위해 일부 매개변수를 사용자 정의해야 합니다. 이 경우 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!