ajaxでCRUDをどのように実現するか

Ajaxは、ページをリロードせずにサーバにリクエストを送信し、データを取得するための非同期通信を実現する技術です。以下にAjaxを使ったCRUD機能の実装例を示します。

1. サーバーにデータをPOSTリクエストとして Ajax を使用して送信し、成功時にページのデータを更新します。

$.ajax({
  type: "POST",
  url: "add.php",
  data: { name: "John", age: 30 },
  success: function(response) {
    // 更新页面数据
  }
});

1. 削除データ：サーバーに削除したいデータの ID を POST リクエストで送信して、成功時のコールバック関数で画面のデータを更新します。

$.ajax({
  type: "POST",
  url: "delete.php",
  data: { id: 1 },
  success: function(response) {
    // 更新页面数据
  }
});

1. POSTリクエストで修正内容をサーバに送信して、成功時コールバック関数内でページのデータを更新する。

$.ajax({
  type: "POST",
  url: "update.php",
  data: { id: 1, name: "John", age: 35 },
  success: function(response) {
    // 更新页面数据
  }
});

1. サーバーからデータを取得するためにAjax GETリクエストを送信し、成功時のコールバック関数でページデータを更新します。

$.ajax({
  type: "GET",
  url: "get.php",
  success: function(response) {
    // 更新页面数据
  }
});

上記サンプルのadd.php、delete.php、update.php、get.phpはサーバー側の処理ファイルであり、それぞれの操作を処理してデータの返却を行います。具体的な実装方法はPHP、Node.jsなどのサーバー側の技術によって異なります。