[SpringBoot] 버튼으로 체크박스 여러개 삭제 500에러

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

페이지의 게시글 여러개 중 체크박스에 체크한 것들만 버튼을 눌러 삭제하고자 하였습니다.
여러 체크박스 선택해도 삭제가 하나만 되는 현상이 발생하고 콘솔창에 500에러가 떴습니다.

 

<시도1>

/* 게시글 삭제 */
var delForm = $('#form-del-report-admin');
var delBtn = $('#r-del-btn');
delBtn.on('click', function(event) {
    var checkboxes = [];
    $('input[name="rowCheck"]:checked').each(function() {
        checkboxes.push($(this).val());
    });
    console.log(checkboxes);

    if (checkboxes.length > 0) {
        swal({
            text :"신고 게시글을 삭제하시겠습니까?",
            buttons : ["취소하기","삭제하기"]
        })
        .then((value) => {
             console.log(value);
             if (value) {
                 $('#form-del-report-admin').append('<input type="hidden" name="checkboxes" value="' + checkboxes.join(',') + '" + '>');
                 delForm.submit();
             } else {
                 console.log("return!");
             }
             /*if(value){
                 delForm.submit();
                 console.log("del-r good");
             }else{
                console.log("return!");
             }*/
          });
     });
});

 

<시도2>

/* 게시글 삭제 */
var delForm = $('#form-del-report-admin');
var delBtn = $('#r-del-btn');
delBtn.on('click', function(event) {
    console.log(no);
    var checkboxes = [];
    $('input[name="rowCheck"]:checked').each(function() {
        checkboxes.push($(this).val());
    });
    console.log(checkboxes);

        swal({
            text :"신고 게시글을 삭제하시겠습니까?",
            buttons : ["취소하기","삭제하기"]
        })
        .then((value) => {
             console.log(value);

             $.ajax({
                 url:"${contextPath}/processReport",
                 data: {checkboxes : checkboxes,
                     reportNo : $("#reportNo").val()},
                 success: function(data){
                    $('#reportWriter').text(data.userNick);
                    $('#enrollDate').text(data.enrollDate);
                    $('#reportTitle').text(data.reportTitle);
                    $('#reportContent').text(data.reportContent);
                    $('#reportNo').val(data.reportNo);
                     console.log(result);
                     delForm.sumbit();
                 },
                 error: function(){
                     console.log("done!");
                 }

          });
     });
});

var checkboxes = [];
             $('input[name="rowCheck"]:checked').each(function() {
             checkboxes.push($(this).val());
                });
부분을 추가하고 나니, 내가 삭제하고자 체크박스를 선택한 값이 서버 콘솔에 배열로 찍힙니다. 하지만 500에러...
sts 콘솔창에는 왜 Null이 나오는 것인가...

 

<시도3>

/* 게시글 삭제 */
 var delForm = $('#form-del-report-admin');
 var delBtn = $('#r-del-btn');
 delBtn.on('click', function(event) {
    console.log(no);
    var checkboxes = [];
    $('input[name="rowCheck"]:checked').each(function() {
        checkboxes.push($(this).val());
     });
    console.log(checkboxes);

        swal({
            text :"신고 게시글을 삭제하시겠습니까?",
            buttons : ["취소하기","삭제하기"]
        })
        .then((value) => {
             console.log(value);
             const jsonString = JSON.stringify({
                                    checkboxes : checkboxes, 
                                    reportNo: $("#reportNo").val()
                                });
             console.log(jsonString);
             $.ajax({
                 url:"${contextPath}/deleteReport",
                 datatype: "json",
                 contentType: "application/json",
                 data: JSON.parse(jsonString),
                 success: function(data){
                    $('#reportWriter').text(data.userNick);
                    $('#enrollDate').text(data.enrollDate);
                    $('#reportTitle').text(data.reportTitle);
                    $('#reportContent').text(data.reportContent);
                    $('#reportNo').val(data.reportNo);
                     console.log(data);
                     delForm.sumbit();
                 },
                 error: function(){
                     console.log("done!");
                 }

          });
      });
 });

넘겨줄 checkboxes 배열을 json형태로 바꿔주었다. 그런데도 500에러...

 

<시도 4>

/* 게시글 삭제 */
 var delForm = $('#form-del-report-admin');
 var delBtn = $('#r-del-btn');
 delBtn.on('click', function(event) {
    console.log(no);
    var checkboxes = [];
    $('input[name="rowCheck"]:checked').each(function() {
        checkboxes.push($(this).val());
     });
    console.log(checkboxes); // ok
        swal({
            text :"신고 게시글을 삭제하시겠습니까?",
            buttons : ["취소하기","삭제하기"]
        })
        .then((value) => {
             console.log(value);
            if (value) {
               // 삭제하기 버튼이 눌렸을 때 처리할 코드
               for (var i = 0; i < checkboxes.length; i++) {
                   var reportId = checkboxes[i];
             $.ajax({
                 url:"${contextPath}/deleteReport",
                 data: { checkboxes : JSON.stringify(checkboxes)},
                 success: function(data){
                    $('#reportWriter').text(data.userNick);
                    $('#enrollDate').text(data.enrollDate);
                    $('#reportTitle').text(data.reportTitle);
                    $('#reportContent').text(data.reportContent);
                    $('#reportNo').val(data.reportNo);
                     console.log(data);
                 },
                 error: function(){
                     console.log("error!");
                 }

          });
      });
 });

json형식으로 변수 선언 및 변경하는 과정에서 이중으로 잘못 작성했었고, 이를 수정하였는데도 값이 프론트단에서 백단으로 못넘어감.... 그래서 알아보니 gson작업이 필요했다....

너무 번거로워지는 식으로 인해 form태그로 값을 컨트롤러로 전송할 것이다.

(코드 수정후 추후 포스팅 수정예정)