jQuery는 미리 작성된 javascript코드
그래서 임포트해줘야함
https://www.w3schools.com/jquery/jquery_get_started.asp
$('#article-url').val()
article-urlt ===id 지정해준 값
id에 맞는 .~에 따라 기능이 달라짐
ex)
$('#post-box).css('display')
html문자
`(백틱)
서버 -클라이언트
JSON
딕셔너리와 리스트의 조합과 생김새가 똑같다.
리스트안에 여러 딕셔너리 있는거
클라이언트 - 서버
같은 주소의 창구더라도, GET이냐 post냐에 따라서 가져가야할 데이터라던지, 동작하는 기능이 다름
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)
브라우저에 엔터를 치는 행위 자체가 get요청
code라는 파라미터 값 전달(예시)
요청하는 클라이언트 프로그래머와 요청받는 서버 프로그래머가 약속한 code파라미터 값
<https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967> 위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요. "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
* 서버 주소: <https://movie.naver.com/movie/bi/mi/basic.nhn> * 영화 정보: code=161967
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다. & : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다! q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
Ajax사용
jQuery를 임포트한 페이지에서만 사용가능
Ajax기본 골격(외우는거 아님, 외울필요 x)
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})이제 temp_html = <li>${gu_name} : {gu_mise}<\li>
<!-- console.log(temp_html)확인하기 -->
2주차 숙제 : 새로고침할때마다 환율 값 변경시키기
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Song Myung', serif;;
}
.mytitle {
background-color: white;
width: 300px;
height: 50px;
padding top: 20px;
}
.wrap {
margin: auto;
width: 500px;
}
.mybyn {
width: 500px;
margin: auto;
display: block;
}
.rates {
text-align: left;
color: blue;
}
</style>
<script>//새로고침할때함수불러주는코드
$(document).ready(function () {
q1();
});
function q1() {
$("#book-rate").empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate = response['rate']
let temp_html = `<span class = "rates">달러-원 환율: ${rate}</span>`
$("#book-rate").append(temp_html)
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="mytitle"></div>
<img src='http://image.yes24.com/goods/68145670/XL' width='500' height='400'>
<h1>책을 팝니다 <span style="font-size:15pt">책의가격 : 42000원/권</h1>
<h6>이 책을 풀면 저혈압이신 분들도 고혈압이 될 수 있답니다! 아주 좋은 자연 치료제에요~! 다들 구매하신다면 화가 뿜뿜>_<</h6>
<span id="book-rate"></span>
</div>
<div class="mybyn">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주문자이름</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>-----수량을 선택하세요-----</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">주소</span>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">전화번호</span>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<button type="submit" class="btn btn-primary">주문하기</button>
</div>
</div>
</div>
</body>
</html>결과:
Ajax기본 골격 활용법 잊지않기,
jquery는 검색하면나옴
id값 이용하는거 잊지않기
``기억
'✍2021,2022 > WEB' 카테고리의 다른 글
| 5주차 필기/개발일지 (0) | 2021.07.01 |
|---|---|
| 4주차 개발/필기일지 (0) | 2021.07.01 |
| 3주차 필기/개발일지 (0) | 2021.06.20 |
| 1주차 필기/개발일지 (0) | 2021.06.14 |
| 개발일지 프롤로그 (0) | 2021.05.24 |
