Convert Ajax jquery to Axios

jQuery Ajax로 호출하면 JAVA Controller 단으로 진입 성공.

하지만 Axios로 변경하여 ajax호출하면 JAVA Controller단으로 진입하지 못하여 실패하는 case 발생.

ajax에 담아서 보내는 request 값은 객체안에 JSON 형태를 담아서 호출.

 

브라우저에서 console.log 찍어보면 아래와 같은 형태

{dates: '[{"date":"20230801"}]'}

 

변경 전 성공한 Ajax jquery

$.post(menu_href, requestData, function(data){
    console.log('jQuery success')
}).fail(function(event){
    alert(event);
});

 

 

Axios로 변경 후 성공한 ajax

axios.post(menu_href, requestData, {
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
})
.then(function (response) {
    alert('yeah!');
    console.log(response);
})
.catch(function (error) {
    alert('oops');
    console.log(error);
});

 

문제 발생 사유

- jquery ajax는 context type을 생략하면 application/x-www-form-urlencoded; charset=UTF-8 값이 defulat.

- Axois ajax는 context type을 생략하면 application/json이 default로 추정됨.