[Laravel/jQuery] 비동기 (Ajax)로 레코드를 삭제하고 싶습니다.
하고 싶은 일
Laravel 학습장 님의 사이트를 참고하여 Laravel에서 기본적인 CRUD 앱을 작성중.
사용자를 비동기적으로 삭제하는 기능을 구현했을 때 빠진 점을 비망록으로 메모.
↑이런 느낌으로 유저의 등록이나 편집, 삭제를 할 수 있는 어플입니다.
이번에는 태그로 만들어진 삭제 버튼을 누르면 비동기로 사용자가 삭제되는 기능을 구현합니다.
환경 CentOS: 7.4PHP: 7.2Laravel: 5.6jQuery: 3.3.1
구현시 문제가 되는 점 Ajax를 사용할 때 GET, POST 이외의 HTTP 요청은 어떻게 전송합니까? Ajax에서 CSRF 대책
잘못 된 코드 결국 아래 코드에서 잘 작동했습니다.확인용 팝업이 나오고, OK인 경우는 사용자를 삭제하는 처리를 기술하고 있습니다.
$('#deleteTarget').on('click', function() {
var deleteConfirm = confirm('삭제하시겠습니까?');
if(deleteConfirm == true) {
var clickEle = $(this)
// 삭제 버튼에 사용자 ID를 맞춤 데이터로 포함합니다.
var userID = clickEle.attr('data-user-id');
$.ajax({
url: '/user/' + userID,
type: 'POST',
data: {'id': userID,
'_method': 'DELETE'} // DELETE 요청이야! 라고 가르쳐 준다.
})
.done(function() {
// 통신이 성공하면 클릭 한 요소의 부모 요소의 <tr> 삭제
clickEle.parents('tr').remove();
})
.fail(function() {
alert('오류');
});
} else {
(function (e) {
e.preventDefault()
});
};
});
});
두 가지 넘어지는 포인트
메소드의 지정 이번에는 사용자를 삭제하고 싶지만 보내는 요청은 GET 또는 POST뿐입니다.따라서 Ajax에서 보낸 데이터에 '_method': 'DELETE'를 추가하여 요청을 지정합니다.
CSRF 대책 CSRF 대책이 없으면 Laravel 씨에게 화가 됩니다.HTTP 헤더에 토큰을 포함시켜 두고 (이번에는 <meta> 태그 안에) "{{ csrf_token() }}">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
}
});
이것을 쓰면 Ajax에서 POST할 때 언제나 토큰을 보냅니다.여기 사이트를 참조했습니다.
마지막으로 컨트롤러에서 삭제 처리!
UserController.phppublic function destroy(Request $request, User $user) {
$user = User::findOrFail($request->id);
$user->delete();
}
우선 이것으로 생각한 대로 움직여 주었습니다.
이상입니다.
Reference
이 문제에 관하여([Laravel/jQuery] 비동기 (Ajax)로 레코드를 삭제하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/u-dai/items/d43e932cd6d96c09b69a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
UserController.php
public function destroy(Request $request, User $user) {
$user = User::findOrFail($request->id);
$user->delete();
}
우선 이것으로 생각한 대로 움직여 주었습니다.
이상입니다.
Reference
이 문제에 관하여([Laravel/jQuery] 비동기 (Ajax)로 레코드를 삭제하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/u-dai/items/d43e932cd6d96c09b69a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
