JavaScript를 사용하여 PHP 서버에 양식 데이터 제출을위한 완전한 가이드

gitbox 2025-06-29

개요

현대 웹 개발에서 JavaScript를 사용하여 양식 데이터를 PHP 서버에 제출하는 것은 일반적이고 효과적인 관행입니다. 이러한 방식으로 개발자는 페이지 새로 고침을 피하고 사용자 경험을 향상시킬 수 있습니다. 이 기사는 JavaScript의 Fetch API를 사용하여 양식 데이터의 비동기 제출을 구현하는 방법을 자세히 소개하고 PHP 서버 측 에서이 데이터를 처리하는 방법을 보여줍니다.

JavaScript 양식 제출의 기본 개념

양식 제출에는 일반적으로 사용자가 입력 한 데이터가 포함됩니다. 전통적인 형태의 제출물에서는 페이지가 새로 고침되어 사용자 경험이 좋지 않습니다. JavaScript의 Fetch API 또는 Ajax를 사용하면 페이지를 다시로드하지 않고도 서버로 데이터를 비동기로 보낼 수 있습니다.

Fetch API를 사용하여 양식을 제출하십시오

Fetch API는 최신 JavaScript에서 HTTP 요청을 쉽게 보내는 방법입니다. 다음 예제는 Fetch API를 통해 양식 데이터를 PHP 서버로 전송하는 방법을 보여줍니다.

 <span class="fun">const form = document.querySelector ( &#39;#myform&#39;); form.addeventListener ( &#39;제출&#39;, 함수 (event) {event.preventDefault (); const formdata = new FormData (form); fetch ( &#39;doppl.php&#39;, {방법 : &#39;post&#39;, body : formdata,}) console.log ( &#39;success :&#39;, data) ;catch ((error) => {console.error ( &#39;error :&#39;, error);});</span>

위의 코드를 구문 분석하십시오

이 예에서는 먼저 HTML에서 양식 요소를 선택합니다. `event.preventDefault ()`을 호출하여 양식의 기본 제출 동작을 차단하십시오. 다음으로, 우리는 모든 데이터를 양식으로 자동으로 수집하는 새로운 'FormData'객체를 만듭니다. 마지막으로 Fetch API를 사용하여 데이터를 서버의`jompl.php` 파일로 전송하십시오.

PHP 서버 측의 처리 요청

다음으로, 우리는 PHP 측에서 제출 된 양식 데이터를 받고 처리합니다. `submit.php` 파일에서 다음 코드를 사용하여 양식 데이터를 가져올 수 있습니다.

 <span class="fun">if ($ _server [ &#39;request_method&#39;] == &#39;post&#39;) {$ name = $ _post [ &#39;name&#39;]; $ email = $ _post [ &#39;이메일&#39;]; // 데이터 확인 및 처리를 수행합니다. if (! empty ($ name) && filter_var ($ email, filter_validate_email)) {echo "name : $ name, 이메일 : $ email"; } else {echo "유효하지 않은 입력 데이터."; }</span>

데이터 보안을 보장합니다

양식 데이터를 처리 할 때는 SQL 주입 또는 CSRF (Cross-Site Request Prostery)와 같은 잠재적 보안 문제를 방지하기 위해 데이터 검증 및 청소를 수행해야합니다. 예를 들어, PHP의`Filter_Var` 기능을 사용하면 사서함 형식을 확인하여 데이터의 정확성과 보안을 보장 할 수 있습니다.

요약

JavaScript와 PHP를 결합하여 개발자는 양식 제출을 효율적으로 처리하고 페이지 새로 고침을 피하며 사용자 경험을 향상시킬 수 있습니다. 구현 프로세스 중에는 응용 프로그램의 안정성과 보안을 보장하기 위해 데이터 검증 및 보안에주의를 기울이는 것이 중요합니다.