[Spring] jqGrid 검색 기능 구현 중 발생한 오류들 정리

1. 컨트롤러로 값이 안 넘어가는 문제

처음 시도했던 코드:

function search() {
    var params = {
        title: $("#title").val(),
        content: $("#content").val(),
        writer: $("#writer").val(),
        fromDate: $("#fromDate").val(),
        toDate: $("#toDate").val()
    };

    $("#grid").jqGrid('setGridParam', {
        url: "/board/search",
        postData: params,
        page: 1
    }).trigger("reloadGrid");
}

 

 

 

ajax로 수정한 코드:

function search() {
    var params = {};
    var url = "/board/search";
    
    $('#searchForm').find('input').map(function() {
        if(this.type == 'text') {
            params[this.name] = $.trim($(this).val());
        }
    });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        type: 'post',
        dataType: 'json',
        url: url,
        data: JSON.stringify(params),
        success: function(response) {
            $("#grid").jqGrid('setGridParam', {
                datatype: 'json',
                data: response.rows,
                page: 1
            }).trigger("reloadGrid");
        }
    });
}

 

 

 

 

2. Content type 오류

컨트롤러에 @RequestBody 추가했을 때 발생:

org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

ajax에서 contentType을 'application/json'으로 설정하고 data를 JSON.stringify()로 변환해서 해결

 

 

 

jqGrid

원인: jqGrid reloadGrid 실행 시 초기화할 때 설정한 url을 다시 호출함

해결: success 콜백에서 datatype을 'local'로 설정

success: function(response) {
    $("#grid").jqGrid('setGridParam', {
        datatype: 'local',  // point!
        data: response.rows,
        page: 1
    }).trigger("reloadGrid");
}

 

 

 

 

✅ 메모

1. 검색 기능 구현할 때 jqGrid setGridParam보다는 ajax가 더 직관적이고 제어하기 쉬움
2. @RequestBody 사용할 땐 contentType: 'application/json'이랑 JSON.stringify() 필수
3. 검색 결과 표시할 때 datatype: 'local' 설정으로 전체 목록 재조회 방지
4. 파라미터나 응답 변수명은 범용적으로 쓸 수 있게 지정하는게 좋음 (params, response 등)