프로젝트] JSP 데이터의 여러 전송 방법 중 하나 feat. ajax

현재 데이터 테이블로 값을 불러와서 표를 그린다.

function searchList() {
    $('#datatable_01').DataTable({
        paging: true,
        processing: false,
        serverSide: true,
        scrollY: '62vh',
        scrollCollapse: true,
        destroy: true,
        searching: false,
        lengthChange: false,
        bPaginate: true,
        pageLength: $('#pagePerRowCnt').val(),
        pagingType: 'simple_numbers',
        ordering: false,
        info: false,
        columnDefs: [
           
        ],
        language: dataTableLangKor,
        ajax: {
            url: '/admin/event/goodsList',
            type: 'GET',
            data: function (d) {
                d.columns = null;

                d.searchType =  $('#searchType').val();
                d.searchData = $('#searchData').val();
                d.gdStatus = $('#gdStatus').val();
            },
            dataType: 'json',
            beforeSend: function(xhr) {
                xhr.setRequestHeader(header, token);
            },
            error: function (xhr, option, error) {
                if (xhr.status == 401 || xhr.status == 403) {
                    document.location = '/';
                }else {
                    alert(JSON.parse(xhr.responseText).message);
                }
            },
            dataSrc: function (json) {
                $('#datatable_01_recordsTotal').text(json.recordsTotal);
                return json.data;
            }
        },
        dom: '<"top"ilf>rt<"bottom"p><"clear">',
        dom: 'Bfrtip',
        buttons: [
            {extend: 'excel', filename:'메뉴', className:'btn-xs btn-primary'
                , customize: function( xlsx ) {
                }
            },
            {extend: 'pdf', filename:'메뉴', className:'btn-xs btn-primary'}
        ],
        order: [[0, 'desc']],
        columns: [  //, render:function(data,type,row){return ""}
            {data: 'gdSeq', name: 'gdSeq'},
            {data: '', name: '', render:function(data,type,row){
            	return null;
                	}
            },
            {data: 'gdName', name: 'gdName', render:function(data,type,row){
				return '<a href="/admin/event/eventStep1/'+row.gdSeq+'">'+row.gdName+'</a>';
					}
			},
            {data: 'gdCategory', name: 'gdCategory', render:function(data,type,row){
					if(data=='7'){
						return '강아지사료';
					}else if(data=='9'){
						return '고양이사료';
					}
				}
			},
            {data: 'gdRemainType', name: 'gdRemainType', render:function(data,type,row){
					if(data=='1'){
						return '개냥이';
					}else if(data=='2'){
						return '강아지';
					}else if(data=='3'){
						return '고양이';
					}else if(data=='9'){
						return '집사';
					}							
				}
			},
            {data: 'gdStatus', name: 'gdStatus'},
            {data: '', name: 'gdOpenCloseDt', render:function(data,type,row){
				return row.gdOpenDt + '<br />' + row.gdCloseDt;
				}
			},
            {data: '', name: 'gdSaleEndDt', render:function(data,type,row){
				return row.gdSaleStartdt + '<br />' + row.gdSaleEnddt;
				}
			},
            {data: 'gdSalePauseYn', name: 'gdSalePauseYn', render:function(data,type,row) {
                if(data=='Y') {
                    console.log("짠 1 : " + data);
                        return null;
                    } else if(data=='N') {
                    console.log("짠 2 : " + data);
                        return null;
                    } else if(data == null ? 'N' : data) {
                    console.log("짠 3 : " + data);
                        return 'null';
                    }
                }
            }
        ]
    });
}

 

columns 를 보면 총 9개의 컬럼 (표에서는 하나의 셀)이 있다.

 

이제 하나의 로우에 있는 값을 갖고 서버단으로 보내려고 한다.

 

첫번째 방법)

ajax 에서 data 를 입력해 아래와 같이 { } 안에 key : value 값을 지정해서 보낸다.

function salePauseYnChange(gdSeq, gdSalePauseYn) {
    /*var formData = new FormData;
    formData.append("gdSeq", gdSeq);
    formData.append("gdSalePauseYn", gdSalePauseYn);*/

    $.ajax({
        data : {
            gdSeq : gdSeq,
            gdSalePauseYn : gdSalePauseYn
        },
        type: "POST",
        url: '/admin/event/gdSalePauseYnChange',
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',
        beforeSend: function(xhr) {
            xhr.setRequestHeader(header, token);
        },
        error: function(xhr, status, error) {
            if(failFunc == undefined){
                if (xhr.status == 401 || xhr.status == 403) {
                    document.location = '/';
                }else {
                    alert(JSON.parse(xhr.responseText).message);
                }
            }else{
                failFunc(xhr, status, error);
            }
        }
    });
}

 

여기서 위의 코드는 서버단으로 보내게 되면 null이 나올 것이다.

이유는 processData: false로 설정이 되어 있어서이다.

 

processData를 간략하게 설명하면 ajax로 데이터를 보내게 되면 key value 로 보내게 되는데

이때 Query String 으로 보내게 된다. 즉, key=value&key=value 혹은 (key:value, key:value) 이런식으로 말이다.

하지만 processData 를 false 로 해버리면 Query String으로 보내는 것을 막는다는 것이다.

물론 이 옵션을 지우면 기본값 자체가 true 라서 굳이 processData : true 를 할 필요는 없다.

이 옵션은 뒤늦게 알았지만 파일업로드를 할 때 사용하는 옵션이라고 한다.

 

조금 더 자세한 것은 아래 블로그를 참조하면 될 것 같다.

https://okayoon.tistory.com/entry/ajax-%EC%9D%B4%EC%8A%88-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EA%B0%92%EC%9D%B4-%EC%95%88-%EB%B3%B4%EB%82%B4%EC%A0%B8%EC%9A%94-processData

ajax 이슈, 파라미터 값이 안 보내져요. (processData)