-
HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법
- jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
- Ajax를 이용해 다시 서버에 데이터를 요청
-
jQuery
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리
- 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것(그렇게 때문에, 쓰기 전에 "임포트"를 해야함)
- 형식 : $('#element').hide();
- 사용방법 : jQuery CDN 부분을 참고해서 임포트하고, 특정 tag에 id를 부여하여 사용<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> -
jQuery 기본 함수
- 값 가져와 보기 : $('#post-url').val();
- div 보이기/숨기기 : $('#post-box').show() / $('#post-box').hide();
- css의 값 가져오기 : $('#post-box').css('display');
- tag 내 값 입력 : $('#post-url').val('여기에 텍스트를 입력하면!');
$('#btn-posting-box').text('포스팅 박스 닫기');
- 동적으로 html을 넣는 방법``` let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg'; let link_url = 'https://naver.com/'; let title = '여기 기사 제목이 들어가죠'; let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...'; let comment = '여기에 코멘트가 들어갑니다.'; let temp_html = `<div class="card"> <img class="card-img-top" src="${img_url}" alt="Card image cap"> <div class="card-body"> <a href="${link_url}" class="card-title">${title}</a> <p class="card-text">${desc}</p> <p class="card-text comment">${comment}</p> </div> </div>`;$('#cards-box').append(temp_html);
차분하게 걸어가는 프로그래머