jQueryのajaxメソッドを使ったCRUD処理の方法を解説
①Create（作成）
新しいデータをサーバーに送信して保存することを指します。
【例】
<form id="createForm">
<input type="text" id="taskName" placeholder="Task Name" />
<button type="submit">Create Task</button>
</form>
<script>
$('#createForm').on('submit', function(e) {
e.preventDefault();
let taskName = $('#taskName').val();
$.ajax({
url: '/api/tasks', // サーバーのエンドポイント
type: 'POST', // HTTPメソッドPOST
data: { name: taskName }, // フォームデータを送信
success: function(response) {
alert('Task created: ' + response.name);
},
error: function(error) {
alert('Failed to create task');
}
});
});
</script>
②Read（取得）
サーバーからデータを取得して表示する操作です。
`GET`リクエストを送ることでデータを取得できます。
【例】
<ul id="taskList"></ul>
<script>
$.ajax({
url: '/api/tasks',
type: 'GET',
success: function(response) {
let taskList = $('#taskList');
taskList.empty(); // 以前のデータをクリア
response.tasks.forEach(function(task) {
taskList.append('<li>' + task.name + '</li>');
});
},
error: function(error) {
alert('Failed to load tasks');
}
});
</script>
③Update（更新）
既存のデータを変更する操作です。
`PUT`または`PATCH`リクエストを使ってサーバーにデータを送信します。
【例】
<form id="updateForm">
<input type="text" id="taskId" placeholder="Task ID" />
<input type="text" id="updatedName" placeholder="New Task Name" />
<button type="submit">Update Task</button>
</form>
<script>
$('#updateForm').on('submit', function(e) {
e.preventDefault();
let taskId = $('#taskId').val();
let updatedName = $('#updatedName').val();
$.ajax({
url: '/api/tasks/' + taskId,
type: 'PUT',
data: { name: updatedName },
success: function(response) {
alert('Task updated: ' + response.name);
},
error: function(error) {
alert('Failed to update task');
}
});
});
</script>
④Delete（削除）
データを削除する操作です。
`DELETE`リクエストを使ってデータをサーバーから削除します。
【例】
<form id="deleteForm">
<input type="text" id="deleteTaskId" placeholder="Task ID" />
<button type="submit">Delete Task</button>
</form>
<script>
$('#deleteForm').on('submit', function(e) {
e.preventDefault();
let taskId = $('#deleteTaskId').val();
$.ajax({
url: '/api/tasks/' + taskId,
type: 'DELETE',
success: function(response) {
alert('Task deleted');
},
error: function(error) {
alert('Failed to delete task');
}
});
});
</script>
### 結論
- **Create**: `POST`リクエストで新しいデータを作成する
- **Read**: `GET`リクエストでデータを読み込む
- **Update**: `PUT`または`PATCH`リクエストで既存のデータを更新する
- **Delete**: `DELETE`リクエストでデータを削除する
jQueryの`$.ajax()`メソッドを使えば、これらの操作を簡単に実装できます。