버글버글

[final project] ajax 게시판의 댓글 update 본문

Project/Final project

[final project] ajax 게시판의 댓글 update

Bugle 2022. 12. 17. 20:38
반응형

댓글을 ajax로 구현했는데, Create, Read, Delete는 구현 완료 했지만

ajax Update를 진행하기가 매우 어려웠다.

 

특정 게시물의(게시글 번호) 댓글(DTO)를 둘다 ... .. 하는게... 나는.. 어려웠다..아래 정리본.

 

1. xml

<!-- MySql사용 -->
<update id="updateCmt" parameterType="FreeBoardCmtDTO">
    UPDATE FREE_CMT
       SET FREE_CMT_CONTENT = #{freeCmtContent}, FREE_CMT_MODIFY_DATE = DATE_FORMAT(NOW(), '%y-%m-%d %h:%i')
     WHERE FREE_CMT_NO = #{freeCmtNo}
</update>

 

2. Mapper

	public int updateCmt(FreeBoardCmtDTO freeCmt);

 

 

3. Service / ServiceImpl

// Service
public Map<String, Object> modifyCmt(FreeBoardCmtDTO freeCmt);

// ServiceImpl
@Override
public Map<String, Object> modifyCmt(FreeBoardCmtDTO freeCmt) {
    HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
    int freeNo = Integer.parseInt(request.getParameter("freeNo"));
    freeCmt.setFreeNo(freeNo);		

    Map<String, Object> result = new HashMap<String, Object>();
    result.put("isModify", freeBoardCmtMapper.updateCmt(freeCmt) == 1);

    return result;
}

- console에 찍어보니 freeNo는 string으로 가져오기때문에 numberformatException 에러가 발생했다.

- service에서 int으로 형 변환을 해주니 오류 해결!

 

4. Controller

@ResponseBody
@PostMapping(value="/freecomment/modify", produces="application/json")
public Map<String, Object> modify(FreeBoardCmtDTO freeComment){
    return freeBoardCmtService.modifyCmt(freeComment);
}

 

 

5. view

fn_modifyComment();

function fn_modifyComment(){
    $(document).on('click', '.btn_cmt_run_modify', function(){

        var objParams = {
                freeNo         : $(this)원하는 값.val(),
                freeCmtContent : $(this)원하는 값.val(),
                freeCmtNo      : $(this)원하는 값.val()
        }

        console.log(objParams);

        $.ajax({
            type: 'post',
            url: '/freecomment/modify',
            data: objParams,
            dataType: 'json',
            success: function(resData){
                if(resData.isModify){
                    alert('댓글이 수정되었습니다.');
                    fn_commentList();
                    fn_commentCount();
                }

            }
        });


    });
}

 

. ajax에 원하는 데이터 값을 넣어주는게 매우 어려웠는데 변수로 지정해서 넣어주니 할만 했다..!

학원에서 배운건 1개의 데이터만 받아서 넣어줬는데 JSON처럼 .. 저장(?)해서 지정해주니.. 

반응형