✔ AJAX REVIEW
Ajax는 현재 페이지를 유지하면서 ajax콜을 통해 데이터를 받아올 수 있는 기술이다.
현재 페이지를 유지하고 데이터를 가지고 오는 Ajax
Ajax는 기본적으로 jQuery 에 소속되어 있기 때문에 jQuery를 추가해야한다.
jQuery에 내장되어 있는 $.ajax()로 동작한다.
공부하기 좋은 블로그
https://qkrrudtjr954.github.io/jstl/2018/02/08/ajax-call.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AjaxReview</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button type="button">Click Me!</button>
<div id="text"></div>
<script>
$(function(){
$("button").click(function(){
$.ajax({
url: "ajax/xxx.do", // client will send request URL addr
data: { name:"이지훈", age:27 }, // http 요청과 함께 서버로 보낼 Data
type: "POST", // http 요청방식 GET & POST
dataType: "json", //
/*success: function(json){
$("<h1>").text(json.title).appendTo("body");
$("<div class=\"content\">.html(json.html).appendTo("body");
}*/
})
.done(function(json){
$("<h1>").text(json.title).appendTo("body");
$("<div class=\"content\">.html(json.html).appendTo("body");
})
.fail(function(xhr, status, errorThrown){
$("#text").html("오류가 발생했습니다.<br>").append("오류명: " + errorThrown + "<br>").append("상태: " + status);
})
.always(function(xhr, status){
$("#text").html("요청이 완료되었습니다!");
});
}
});
</script>
</body>
</html>
ᴅᴇ́ᴠᴇʟᴏᴘᴘᴇᴜʀ. ᴘʀᴏɢʀᴀᴍᴍᴀᴛɪᴏɴ 🔥