제이쿼리
제이쿼리란?
제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리는 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다.
제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.
done() 메소드
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn AJAX</title>
</head>
<body>
<h1>Learn AJAX jQuery</h1>
<div id="output"></div>
<button id="clickMe">클릭!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#clickMe').click(webData);
function webData() {
$.ajax({
method: 'GET'
, url: 'https://jsonplaceholder.typicode.com/posts/2'
, dataType: 'json'
}).done(output).fail(function () {
console.log('Error!!');
})
}
function output(data) {
$('#output').html('<h2>' + data.title + '</h2><p>' + data.body + '</p>')
}
</script>
</body>
</html>참고
https://api.jquery.com/jquery.ajax/
http://www.devkuma.com/codes/162
$.ajax({url: '/'}).done(function(data) {});
$.ajax({
url: '/',
success: function(data) {}
});sucess 사용
$('#clickMe').click(webData);
function webData() {
$.ajax({
dataType:"json",
url:'https://jsonplaceholder.typicode.com/posts/3',
success:success
})
.done(function(){console.log('DONE')})
}
function success(data,status,xhr){
console.log(data)
console.log(status)
console.log(xhr)
$('#output').html(data.title)
}
참고자료
https://araikuma.tistory.com/640
https://blog.shovelman.dev/829
https://opentutorials.org/course/53/45
https://www.samsungsds.com/kr/insights/jQuery.html
픽서