오늘 배운 것
- JQuery로 AJAX 사용해보기
AJAX기능을 이용해서 JSON으로 Data 받아오기
https://jsonplaceholder.typicode.com/ 에서 post형식의 JSON데이터를 받아 AJAX로 출력
<body>
<header>
<h1>jQuery AJAX</h1>
</header>
<div id="container">
<div id="results"></div>
</div>
<script>
$.ajax({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/posts',
dataType: 'json',
}).done(function (data) {
// 요청 성공 시 결과 data
$.each(data, function (i, item) {
$('#results').append(`<h3>${item.title}</h3><p>${item.body}</p>`); // 변수를 사용하기위해 백틱사용
});
});
</script>
</body>
AJAX기능을 이용해서 JSON으로 Data 전송하기
<body>
<header>
<h1>jQuery AJAX Post</h1>
</header>
<div id="container">
<h3>Post 추가</h3>
<form id="postForm" action="https://jsonplaceholder.typicode.com/posts" method="post">
<input type="text" id="title" placeholder="제목" /> <br />ㄱㄱㄱ
<textarea id="body" cols="30" rows="10" placeholder="내용"></textarea> <br />
<input type="submit" value="전송" />
</form>
</div>
<script>
$('#postForm').submit(function (e) {
// 전송버튼을 눌렀을 때 이벤트(submit)
e.preventDefault(); // 이벤트시 서버로 보내는 요청을 중지
// console.log('서버주소로 요청');
let title = $('#title').val(); // title 창의 내용
let body = $('#body').val(); // body 창의 내용
// let url = "https://jsonplaceholder.typicode.com/posts"
let url = $(this).attr('action'); // form 의 action 속성의 값(주소)
$.post(url, { title: title, body: body }).done(function (data) {
console.log('포스트 저장됨');
console.log(data);
});
});
</script>
</body>- 가상의 data라서 실제로 저장되지는 않음
- JSON데이터의 양식에 맞춰서 submit
