ajax를 활용해서 데이타 전송하기.

$(document).ready(function () {
  $("#productForm").submit(function (e) {
    e.preventDefault();
    
    var formData = new FormData(this); // 폼 데이터 객체 생성

    // Make an AJAX request 
    $.ajax({
      url: "includes/productFormProcess.php",
      method: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        console.log(response);
      },
      error: function(xhr, status, error) {
        console.error(xhr.responseText);
      }
    });
  });
});

 

id가 productForm으로 전송된 폼데이타들 (input으로 전송되어진) FormData 객체를 사용하여 폼 데이터를 생성하고, data 속성에 formData를 전달합니다. 또한, processData와 contentType를 false로 설정하여 파일과 폼 데이터가 제대로 처리되도록 설정하였습니다.

 

 

실제 데이타가 전송되는지 확인한다. 

 

<?php
$category = $_POST['category'] ?? '';
$section = $_POST['section'] ?? '';
$title = $_POST['title'] ?? '';
$price = $_POST['price'] ?? '';
$qty = $_POST['qty'] ?? '';
$regdate = $_POST['regdate'] ?? '';
$photo = $_FILES['photo'] ?? '';
$memo = $_POST['memo'] ?? '';

// 데이터 처리를 위한 추가 작업 수행
// ...

$response = "데이터가 성공적으로 처리되었습니다.";
echo $response;
?>

?? 연산자를 사용하여 필드의 값이 존재하지 않을 경우 빈 문자열('')로 초기화하였습니다.