Ajaxページ削除機能
4755 ワード
現在、サイドプロジェクトにおけるCRUD機能を実装しています.
このうち、DELETE機能を実現するため、フロントにAJAX機能を追加しました.
上図に示すように、複数のカードがページに記入され、deleteというボタンがたくさんあるので、赤いボックスカードのボタンを1枚しか操作できません.これに対して解決が必要だ.
したがって、idを使用して特定のオブジェクトを選択することはできないため、最初の投稿のみが削除されます.
いくつかの簡便な方法を用いて,ボタン素子にspanラベルを付けて指定し,成功した.
このうち、DELETE機能を実現するため、フロントにAJAX機能を追加しました.
<script>
$('#delete').click((e) => {
$.ajax({
url:"/delete/",
method: "DELETE",
data: {cnt: e.target.value}
}).done((result) => {
location.reload();
})
})
</script>
上図に示すように、複数のカードがページに記入され、deleteというボタンがたくさんあるので、赤いボックスカードのボタンを1枚しか操作できません.これに対して解決が必要だ.
<span class="delete" ><button type="button" class="btn btn-danger" value="<%= posts[i].cnt %>">삭제</button></span>
$('.delete').click((e) => {
$.ajax({
url:"/delete/",
method: "DELETE",
data: {cnt: e.target.value}
}).done((result) => {
location.reload()
}).fail((err) => {
console.log("err", err);
})
})
コレクタのidは、単一のオブジェクトのみを指定します.したがって、idを使用して特定のオブジェクトを選択することはできないため、最初の投稿のみが削除されます.
いくつかの簡便な方法を用いて,ボタン素子にspanラベルを付けて指定し,成功した.
Reference
この問題について(Ajaxページ削除機能), 我々は、より多くの情報をここで見つけました https://velog.io/@tkddls8848/Ajax-페이지-삭제-기능テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol