[PHP]비동기 CRUD(server)

// 데이터 추가
document.getElementById("btn_add").onclick = function (e) {
  let data = $("#user_form").serialize();
  $.ajax({
    data: data,
    type: "post",
    url: "backend/save.php",
    success: function (dataResult) {
      let dataResult = JSON.parse(dataResult);
      if (dataResult.statusCode == 200) {
        document.getElementById("add").style.display = "none";
        alert("Data added successfully !");
        // location.reload();
        // 수정된 데이터가 페이지의 다양한 부분에 영향을 미치거나,
        // 페이지의 최신 상태를 보장해야 하는 경우
      }
    },
    error: function (xhr, status, error) {
      alert("An error occurred. HTTP Status: " + xhr.status + ". Status: " + status + ". Error: " + error);
    },
  });
};

// update 요소 설정
$(document).on("click", ".update", function (e) {
  let id = this.getAttribute("data-id");
  let name = this.getAttribute("data-name");
  let email = this.getAttribute("data-email");
  let phone = this.getAttribute("data-phone");
  let city = this.getAttribute("data-city");

  $("#id_u").val(id);
  $("#name_u").val(name);
  $("#email_u").val(email);
  $("#phone_u").val(phone);
  $("#city_u").val(city);
});

// 데이터 업데이트
document.getElementById("update").onclick = function (e) {
  let data = $("#update_form").serialize();
  $.ajax({
    data: data,
    type: "post",
    url: "backend/save.php",
    success: function (dataResult) {
      document.getElementById("editEmployeeModal").style.display = "none";
      alert("Data updated successfully !");
      // location.reload();
    },
    error: function (xhr, status, error) {
      alert("An error occurred. HTTP Status: " + xhr.status + ". Status: " + status + ". Error: " + error);
    },
  });
};

// delete 요소 클릭
$(document).on("click", ".delete", function () {
  let id = this.getAttribute("data-id");
  $("#id_d").val(id);
});

// 데이터 삭제
document.getElementById("delete").onclick = function (e) {
  let data = $("#user_form").serialize();
  $.ajax({
    url: "backend/save.php",
    type: "POST",
    cache: false,
    // cache: false 설정은 AJAX 요청을 할 때 브라우저 캐시(caching)를 사용하지 않도록 지시합니다.
    // 이 옵션은 jQuery의 $.ajax 함수에서 사용되며,
    // 요청 결과가 캐시되지 않도록 하여 매번 서버로부터 실제 응답을 받게 합니다.
    data: {
      type: 3,
      id: $("#id_d").val(),
    },
    success: function (dataResult) {
      document.getElementById("deleteEmployeeModal").style.display = "none";
      $("#" + dataResult).remove();
    },
    error: function (xhr, status, error) {
      alert("An error occurred. HTTP Status: " + xhr.status + ". Status: " + status + ". Error: " + error);
    },
  });
};

// 다중 데이터 삭제
document.getElementById("delete_multiple").onclick = function (e) {
  let user = [];
  $(".user_checkbox:checked").each(function () {
    user.push($(this).attr("data-user-id"));
  });
  if (user.length <= 0) {
    alert("Please select records.");
  } else {
    WRN_PROFILE_DELETE = "Are you sure you want to delete " + (user.length > 1 ? "these" : "this") + " row?";
    let checked = confirm(WRN_PROFILE_DELETE);
    if (checked == true) {
      var selected_values = user.join(",");
      $.ajax({
        type: "POST",
        url: "backend/save.php",
        cache: false,
        data: {
          type: 4,
          id: selected_values,
        },
        success: function (response) {
          let ids = response.split(",");
          for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).remove();
          }
        },
      });
    }
  }
};