1. jQuery 사용하기
-> jQuery import
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>css에서는 class를 선택자로 했지만 jQuery는 id를 선택자로 한다
a) input박스의 값을 가져오려면?
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');b) 동적으로 html을 넣으려면?
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 한다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있다
// temp_html은 붙이려고 하는 것의 단일체(unit)
let title = '영화 제목이 들어갑니다';
let temp_html = `<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">**${title}**</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>`;
// cards-box address의 내용에 가서 temp_html을 append해라
$('#cards-box').append(**temp_html**);c) image/text 바꾸기
$("#아이디값").attr("src", 이미지URL);
$("#아이디값").text("바꾸고 싶은 텍스트");2. 서버-클라이언트 관계
a) server->client: 'Json'(JsonView 사용하면 더 깔끔하게 정리 가능)
'Json'은 dictionary와 유사하게 Key:Value로 이루어져 있다.
b) client->server: API에 요청
i) Get -> 데이터 조회(Read)를 요청 -> "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 영화 번호
ex) https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
- 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
- 영화 정보: code=161967
ii) Post -> 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청
3. Ajax - jQuery
-> Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
a) Ajax 기본 골격(Get 방식)
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})b) 로딩 후 호출
$(document).ready(function(){
alert('다 로딩됐다!')
});