Dev Chongmin

JavaScript 코드를 따로 정리하려고 js 파일을 만들었는데 

<%= request.getContextPath %>가 사용이 안 될지는 몰랐습니다.

그래서 다른 방법을 알아보는 데 사용하고 싶을 만큼 한눈에 와닿는 건 찾지 못했습니다.

결국 직접 만들었는데 이것도 지저분하긴 합니다. 그래도 저 같은 사람이 있을까 봐 공유합니다.

아래 MDN 사이트의 Location 자료를 보고 origin과 pathname 속성을 사용했습니다.

https://developer.mozilla.org/ko/docs/Web/API/Location

http/https에서 origin 속성을 사용하는 경우에는 도메인을 포함해 포트번호까지 문자열로 반환합니다.

pathname의 경우 도메인 이후 URL주소를 문자열로 반환합니다.

http://localhost:8080/controller/developer/userList.do

전체 URL 경로가 위와 같다면 origin과 pathname의 반환 값은 아래와 같습니다.

var pathname = window.location.pathname;
/controller/developer/userList.do


var origin = window.location.origin;
http://localhost:8080

이와 같은 결과 값을 가지고 저는 <%= request.getContextPath %>와 같은 값을 적용하기 위해

js파일 상단에 아래와 같은 변수를 설정해줬습니다.

스플릿 했기 때문에 양쪽에 "/"를 붙여주고 인덱스 1번에 있는 값을 가운데 넣습니다.

const pathname = "/" + window.location.pathname.split("/")[1] + "/";
const origin = window.location.origin;

const contextPath = origin + pathname;

그 값은 아래와 같습니다.

http://localhost:8080/controller/

cache

기본값은 true로 dataType이 'script'나 'jsonp'일 때는 기본값이 false다.

false로 설정하면 요청된 페이지가 브라우저에 캐싱되지 않도록 한다. 

그리고 HEAD와 GET요청에만 정확하게 작동한다.

contentType

ajax를 통해서 서버에 데이터를 보낼 때 데이터 유형을 결정한다.

기본값은 'application/x-www-form-urlencoded; charset=UTF-8'이다.

jQuery 1.6부터는 false값을 설정하여 요청 헤더에 콘텐츠 타입을 설정하지 않을 수 있다.

processData

기본값은 true로 data속성의 값이 콘텐츠 타입에 맞게 쿼리 문자열로 처리된다.

처리되지 않은 데이터를 보내려면 이 속성값으 false로 바꾸면 된다.

이 내용은 ajax의 multipart/form-data로 이미지를 서버로 전송하려고 할 때

500 에러가 발생하면서 해결법을 찾을 때 나온 속성들이다.

해본 결과 cache는 설정 안 해줘도 된다.

function addReview(){
    var formData = new FormData($("#addReview")[0]);
   
    $.ajax({
        url: "addReview.do",
        method: "POST",
        data: formData,
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        success: function(data){
        	myModal.hide();
        },
        error: function(){
        	console.log("error");
        }
    });
}

더 자세한 내용은 jQuery 공식 사이트를 활용하세요.

https://api.jquery.com/jQuery.Ajax/#jQuery-ajax-settings-settings