한국어
한국어
현대 웹 개발에서 프론트 엔드와 백엔드 간의 데이터 상호 작용은 동적 웹 페이지를 실현하고 사용자 경험을 풍부하게하는 데 중요한 부분입니다. 이 기사에서는 효율적인 데이터 통신을 완료하기 위해 JavaScript로 데이터를 PHP 배경으로 전송하는 방법을 배우게됩니다.
JavaScript는 주로 브라우저 측의 상호 작용 및 논리 처리에 사용되며 PHP는 서버 측의 데이터 처리 및 응답을 담당합니다. 이 두 가지를 사용하면 프론트 엔드와 백엔드 간의 원활한 데이터 상호 작용을 달성하여 웹 사이트의 응답 속도와 사용자 경험을 향상시킬 수 있습니다.
Ajax (비동기 JavaScript 및 XML)를 사용하면 웹 페이지가 다시로드하지 않고 서버와 데이터를 교환 할 수 있습니다. 이 비동기 통신 방법은 사용자 작업이 더 부드럽고 데이터 전송을보다 유연하게 만듭니다.
AJAX 요청에는 일반적으로 다음 단계가 포함됩니다.
다음 예제는 Ajax를 사용하여 프론트 엔드에서 PHP 배경까지 JSON 형식으로 데이터를 보내는 방법을 보여줍니다.
let data = { name: "John", age: 30 };
let xhr = new XMLHttpRequest();
xhr.open("POST", "backend.php", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
console.log(xhr.responseText);
}
};
xhr.send(JSON.stringify(data));PHP 측면에서 프론트 엔드에 의해 전송 된 JSON 데이터는 입력 스트림을 읽고 구문 분석 및 처리를 통해 얻습니다.
$data = json_decode(file_get_contents("php://input"), true);
$name = $data['name'];
$age = $data['age'];
echo "Received: Name = $name, Age = $age";
?>Ajax 기술의 도움으로 JavaScript와 PHP는 효율적이고 비동기식 데이터 전송을 달성 할 수 있으며 페이지 새로 고침을 피하고 웹 애플리케이션의 동적 표현력을 향상시킬 수 있습니다. 이 프론트 엔드 및 백엔드 상호 작용 방법을 마스터하면보다 대화 형 웹 응용 프로그램의 개발을위한 탄탄한 토대가 될 것입니다.
