Ajax 기능 구현 - 로딩 후 호출하기 ready()
HTML+CSS+JS+Flask/jQuery+Ajax2021. 6. 14. 02:53Ajax 기능 구현 - 로딩 후 호출하기 ready()

$(document).ready(function(){}); 페이지가 로딩 되자마자 호출되는 함수이다. DB에 저장되어 있는 데이터를 페이지가 로딩됨과 동시에 불러올 때 용이하다! $(document).ready(function(){ //로딩이 될 때마다 취할 행동을 적으세용 }); 환율을 즉각적으로 반영하는 페이지를 만들어보자! 페이지가 로딩되자마자 환율 api를 호출해서 화면에 자동으로 띄우는 기능을 만들어보자 Ajax의 ready 함수를 이용해서 이를 구현할 수 있다! 오늘의 환율은 어떻게 될까요

Ajax + jQuery 연습, 유용한 메서드
HTML+CSS+JS+Flask/jQuery+Ajax2021. 6. 12. 20:12Ajax + jQuery 연습, 유용한 메서드

empty(), append(), attr() $('element').empty(); 태그 안의 내용을 모두 비우는 함수 jQuery의 파라미터는 태그 안에 모든 태그를 비우길 원하는 태그를 넣는다. $('element').append(`삽입할 태그`); 태그안에 태그를 삽입하는 함수 jQuery의 파라미터는 태그를 삽입할 엘리먼트를 넣는다. append() 안에는 ` ` (빽틱)으로 삽입하길 원하는 태그를 감싸서 넣는다. 만약 태그 안에 텍스트의 값을 밖에 있는 변수를 넣고 싶으면 ${변수명} 이런식으로 넣으면 된다. $("#img태그 id").attr("src", "이미지 경로"); jQuery img 태그 src 변경하는 함수 jQuery의 파라미터는 이미지 태그의 id를 넣는다. 와 같은 태그의 ..

서버-클라이언트 통신 / Ajax
HTML+CSS+JS+Flask/jQuery+Ajax2021. 6. 12. 17:01서버-클라이언트 통신 / Ajax

서버↔클라이언트 통신 아래 HTTP 프로토콜 관련 글을 먼저 읽어보자! https://duckgugong.tistory.com/156 HTTP HTTP (Hypertext Transfer Protocol) HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(Protocol)이다 HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. duckgugong.tistory.com 서버→클라이언트 Ajax는 Javascript로 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법이다. 클라이언트가 서버에게 데이터를 요청할 때 서버에서 클라이언트에게 데이터를 주는 포맷을 "JSON"이라고 한다. JSON은 아래와 같이 Key:Value로 이루어져 있다. 여기를 클..

HTML+CSS+JS+Flask/jQuery+Ajax2021. 6. 12. 13:32JQuery 사용해서 기능 구현 + 퀴즈

버튼을 눌렀을 때, 엘리먼트 숨기거나 보이게 하기 아래와 같은 화면에서 '포스팅박스 열기' 버튼을 누르면 숨겨진 창이 나타나고 버튼의 내용이 '포스팅박스 닫기'로 바뀌고 다시 한 번 버튼을 클릭하면 원래 모습으로 돌아가도록 구현해보자. 아래에서 function openclose() 부분을 채워서 기능을 완성시키자! jQuery의 show() / hide() 기능을 사용해서 구현하자. 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅박스 열기 아티클 URL 간단 코멘트 기사 저장 display 속성을 이용해서 클릭시에 요소가 보이거나 안보이게 하기 openclose() 부분을 아래처럼 display의 속성을 조건문과 이용해서 element를 보이게/안보이게 하거나 텍스트..

image