Ajax CRUDモーダルの実装方法

Ajaxを使用して、CRUD（Create, Read, Update, Delete）操作を実行するモーダルを実装する方法について説明します。以下に、各操作のコード例を示します。

レコードの作成（Create）: モーダル内のフォームを使用して、新しいレコードを作成します。以下は、JavaScriptとjQueryを使用した例です。

$(document).on('submit', '#create-form', function(e) {
  e.preventDefault();

  // フォームデータの取得
  var formData = $(this).serialize();

  // Ajaxリクエストの送信
  $.ajax({
    url: 'create.php',
    type: 'POST',
    data: formData,
    success: function(response) {
      // 成功時の処理
      $('#create-modal').modal('hide');
      // レコードを表示するための更新処理などを実行する
    },
    error: function(xhr, status, error) {
      // エラー時の処理
      console.error(error);
    }
  });
});

レコードの読み取り（Read）: モーダル内に情報を表示するために、既存のレコードを読み取ります。以下は、読み取り処理の例です。

function showRecord(recordId) {
  $.ajax({
    url: 'read.php',
    type: 'GET',
    data: { id: recordId },
    success: function(response) {
      // レコード情報を表示する処理
      $('#record-details').html(response);
      $('#view-modal').modal('show');
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
}

レコードの更新（Update）: モーダル内のフォームを使用して、既存のレコードを更新します。以下は、更新処理の例です。

$(document).on('submit', '#update-form', function(e) {
  e.preventDefault();

  // フォームデータの取得
  var formData = $(this).serialize();

  // Ajaxリクエストの送信
  $.ajax({
    url: 'update.php',
    type: 'POST',
    data: formData,
    success: function(response) {
      // 成功時の処理
      $('#update-modal').modal('hide');
      // 更新されたレコードを表示するための処理などを実行する
    },
    error: function(xhr, status, error) {
      // エラー時の処理
      console.error(error);
    }
  });
});

レコードの削除（Delete）: モーダル内に削除の確認メッセージを表示し、ユーザーが削除を選択すると、レコードを削除します。以下は、削除処理の例です。

function confirmDelete(recordId) {
  if (confirm('本当に削除しますか？')) {
    $.ajax({
      url: 'delete.php',
      type: 'POST',
      data: { id: recordId },
      success: function(response) {
        // 成功時の処理
        // 削除されたレコードを非表示にするなどの処理を実行する
      },
      error: function(xhr, status, error) {
        // エラー時の処理
        console.error(error);
      }
    });
  }
}

上記のコード例を参考にしながら、Ajax CRUDモーダルを実装してください。