ajax를 axios 로 대체 하려고 합니다. 어떤식으로 바꿔야하는지요
본문
안녕하세요.
ajax통신으로 문제가 자주 발생해 axios 로 대체해보려고 합니다.
제이쿼리 처럼 상단에
<script src="주소:unpkg.com/axios/dist/axios.min.js"></script>
선언하고 사용 가능한지요?
아작스로 한 부분을 axios 로 어떻게 변경하나요..?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
function login_app()
{
$.ajax({
url: 'https://api.주소~~'
type: "POST",
dataType: 'json',
data: {
identifier: $("#identifier").val(),
password: $("#password").val(),
},
success: function(data) {
alert('성공--' + data['user']['username']);
console.log(data);
} ,
error : function(){
alert("AJAX Failed!");
}
});
}
</script>
------- axios 변경중 ------------------------------------------
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function login_app()
{
axios({
method: 'post',
url: 'https://api주소~~~,
data: {
identifier: '*** 개인정보보호를 위한 이메일주소 노출방지 ***',
password: '1234',
}
~~~~? 구현 방법~
});
}
</script>
답변 4
아... 왜 이걸 이제 발견했는지;;
ie11에서 jquery ajax No Transport error 에 관한 내용입니다
https://stackoverflow.com/questions/9160123/no-transport-error-w-jquery-ajax-call-in-ie
실제 api url 에서 Access-Control-Allow-Origin을 허용해줘도
jquery 옵션에 명시해줘야 되는군요
아래 코드 cors / crossDomain 부분이요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$.support.cors = true;
$(function() {
$.ajax({
type: "GET",
url: 'https://project-team.upbit.com/api/v1/disclosure?region=kr&per_page=5',
cache: false,
dataType: 'json',
crossDomain: true,
success: function(data) {
console.log(data);
},
error : function(xhr, status, error) {
console.log(xhr, status, error); // No Transport
}
});
});
</script>
</body>
</html>
두 스크립트가 같은겁니다.
하나만 쓰는 걸로~
ie11에서 Promise 오류를 위해 bluebird 추가요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/todos/1',
responseType: 'json'
})
.then(function (response) {
console.log(response)
});
</script>
</body>
</html>
+ ajax 통신
http://lsp80.cafe24.com/20.html
+axios 통신
http://lsp80.cafe24.com/3.html
개발자도구에서 IE8로 바꿔서 테스트해보면 둘다 동작을 안합니다..
제이쿼리 1.12 사용했고..
답변을 작성하시기 전에 로그인 해주세요.