HTML+CSS+JS+Flask/jQuery+Ajax

Ajax 기본 코드 탬플릿

GET 요청 Ajax 코드 $.ajax({ type: "GET", url: " ", data: {}, success: function(response){ console.log(response) } }) POST 요청 Ajax 코드 $.ajax({ type: "POST", url: "/test", data: { param: 'value', param2: 'value2' }, success: function(response){ console.log(response) } })

Ajax 기능 구현 - 로딩 후 호출하기 ready()

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

Ajax + jQuery 연습, 유용한 메서드

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

서버-클라이언트 통신 / 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로 이루어져 있다. 여기를 클..