JavaScript 입문과 웹 UI개발(27)-Ajax 2 : 상품 더보기 버튼 만들기
2022. 10. 10. 16:50ㆍ애플코딩 javascript 강의
반응형
list.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
</div>
<button class="btn btn-danger" onclick="getmore()" >더보기</button>
</div>
<script>
var cnt=0; //더보기 버튼을 누른 횟수
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
//배열을 파라미터로 넣어주면 배열에 있는 상품들을 출력해주는 함수
function productList(data){
//요청 성공시 실행되는 함수
data.forEach((v)=>{
//받아온 배열을 forEach로 각 데이터를 추가해준다
$('.row').append(`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${v.title}</h5>
<p>가격 : ${v.price}</p>
</div>` );
})
}
//1,2,3 번째 상품 출력
productList(products);
// https://codingapple1.github.io/js/more1.json 여기로 get 요청을 보내면
// 4,5,6번째 상품 3개를 array로 받을 수 있다
//더보기 버튼을 한번더 누르면
// https://codingapple1.github.io/js/more2.json 여기로 get 요청을 보내면
// 7,8,9번째 상품 3개를 array로 받을 수 있다
//더보기 버튼을 눌렀을때 get 요청을 통해 상품정보를 가져오는 함수
function getmore(){
cnt++;
if(cnt==1){//버튼을 한번 눌렀을때만 작동하게 한다
//요청보냄
$.get('https://codingapple1.github.io/js/more1.json')
.done(function(data){
productList(data);
})
}
else if(cnt==2){// 버튼을 두번째 눌렀을때만 작동하게 한다
//요청보냄
$.get('https://codingapple1.github.io/js/more2.json')
.done(function(data){
productList(data);
})
//더보기 버튼을 눌러도 더이상 상품이 없으므로 더보기 버튼을 안보기게함
$('.btn').css('display', 'none');
}
}
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(28)-array에 자주 쓰는 sort, map, filter 함수 (0) | 2022.10.10 |
|---|---|
| JavaScript 입문과 웹 UI개발(26)-ajax 개념(get,post, fetch) (0) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(25)-array, for 반복문 실력향상 과제 (1) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(24)- forEach, for in 반복문 (0) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(23)-자바스크립트로 html 생성하는 법 (1) | 2022.10.08 |