항공사 플랫폼 팀 프로젝트_수정 기능 AJAX 통신

faq 수정 기능 AJAX 통신 구현

모달을 이용해 공지사항 수정 기능 구현

 

controller

@RestController
public class FaqApiController {
    
    @Autowired
    private FaqService faqService;
    
    @PostMapping("/faqUpdate")
    public FaqResponseDto faqUpdate(@RequestBody FaqResponseDto faqResponseDto) {
        faqService.updateFaqById(faqResponseDto.getId(), faqResponseDto);
        return faqResponseDto;
    }
}

→ @RequestBody를 꼭 써주어야 한다 !!!!!!!!!!!!!!!!!!!!

 

 

jsp

<div class="faq--faqList--wrap">
                    <c:forEach var="faqResponseDtos" items="${faqResponseDtos}">
                        <input type="hidden" name="id" value="${faqResponseDtos.id}" id="id" class="${faqResponseDtos.id}">
                        <input type="hidden" name="title" value="${faqResponseDtos.title}" id="title">
                        <input type="hidden" name="content" value="${faqResponseDtos.content}" id="content">
                        <input type="hidden" name="categoryId" value="${faqResponseDtos.categoryId}" id="categoryId">
                        <div class="faq--title--content--wrap" id="faq--title--content--wrap${faqResponseDtos.id}">
                            <div class="faq--name--wrap">
                                <p class="faq--name--cursor--wrap">
                                    <input type="checkbox" name="id" id="delete--checkbox--id" value="${faqResponseDtos.id}"> [ ${faqResponseDtos.name} ] ${faqResponseDtos.title}
                                </p>
                                <c:if test="${principal.userRole.equals(\"관리자\")}">
                                    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal${faqResponseDtos.id}">수정</button>
 
                                    <div class="modal fade" id="myModal${faqResponseDtos.id}">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
 
                                                <div class="modal-header">
                                                    <input type="text" id="faq--modal--title${faqResponseDtos.id}" value="${faqResponseDtos.title}" style="width: 520px;">
                                                    <button type="button" class="close" data-dismiss="modal">×</button>
                                                </div>
 
                                                <div class="modal-body">
                                                    <div class="faq--category--modal--wrap">
                                                        <select id="faq--modal--category${faqResponseDtos.id}">
                                                            <c:forEach var="categories" items="${categories}">
                                                                <option value="${categories.id}">${categories.name}</option>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <textarea rows="6" cols="57" style="resize: none;" id="faq--modal--content${faqResponseDtos.id}">${faqResponseDtos.content}</textarea>
                                                    </div>
                                                </div>
 
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary faq--update--btn" data-dismiss="modal" onclick="updateFaq(${faqResponseDtos.id})">Submit</button>
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                </div>
 
                                            </div>
                                        </div>
                                    </div>
                                </c:if>
                            </div>
                            <div class="faq--content--wrap">${faqResponseDtos.content}</div>
                        </div>
                    </c:forEach>
</div>

 

 

js

function updateFaq(id) {
    let faqId = id;
    
    let data = {
        id: faqId, 
        title: $("#faq--modal--title" + faqId).val(),
        categoryId: $("#faq--modal--category" + faqId).val(),
        content: $("faq--modal--content" + faqId).val()
    };
    
    $.ajax({
        type: 'POST',
        url: `/faqUpdate`,
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data),
        dataType: 'json'
    }).done(fuction(data){
        console.log("수정 성공");
    }).fail(function(error){
        console.log(error);
    });
    
    location.reload();
}