๐คฌ ๋ต๋ตํ์ง๋ง ํ๋ฆฌ๋ฉด ์ง๋ฆฟํด...Javascript์ jQuery..
์ผ๋จ javascript๋ฅผ ์ฒ์์ ์ดํดํ๋๊ฒ ๋๋จํ ์ด๋ ค์ ๋ค.
๊ธฐ์ด ๋ฌธ๋ฒ๊ณผ ์ ์ด๊ฒ ์์๋์ง ์์๊ฐ๋๊ฑฐ์ ์ง์ค์ ํ๋ค๋ณด๋ ๋ง์ ๊ฒ๋ค์ ๋์ณค๋ค
๊ทธ๋ฅ ์๋ ๊ทธ๋๋ก๋ฅผ ๋ฐ์๋ค์ด๊ณ ํ๋ฒ ๋จผ์ ํด๋ณด๋๊ฒ ๋ ๋น ๋ฅธ ๊ธธ์ด๋ผ๋ ๊ฒ์ ์์๋ค.
Javascript๋ ์๋ ์๋ํ๊ณ ๋ค์ํ๊ธฐ ๋๋ฌธ์ HTML์ ์์๋ค์ ์กฐ์ํ๋ ํธ๋ฆฌํ Javascript๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ jQuery์ด๋ค.
document.getElementById("element").style.display = "none";
$('#element').hide();
= jQuery๋ฅผ ์ฌ์ฉํ์ ๋ ํจ์ฌ ์ง๊ด์ ์ด๊ณ ํธ๋ฆฌํด์ง๋ค.
jQuery๋ฅผ ์์ํ๊ธฐ ์ํด ๋ฏธ๋ฆฌ ์์ฑ๋ Jacascript์ฝ๋๋ฅผ ๊ฐ์ ธ์จ๋ค.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<head>์</head>์ฌ์ด์ ์ด ์ฝ๋๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋!
ajax์ ๊ธฐ๋ณธ๊ณจ๊ฒฉ (์ธ์ฐ์ง ๋ง๊ณ ๊ทธ๋ฅ ์ต์ํด์ง๋ ๊น์ง ๊ณ์ ํด๋ณด๊ฑฐ๋, ๋ฐ๋ก ๋ณต๋ถํ๊ธฐ)
$.ajax({
type: "GET", // GET ๋ฐฉ์์ผ๋ก ์์ฒญํ๋ค.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // ์์ฒญํ๋ฉด์ ํจ๊ป ์ค ๋ฐ์ดํฐ (GET ์์ฒญ์์ ๋น์๋์ธ์)
success: function(response){ // ์๋ฒ์์ ์ค ๊ฒฐ๊ณผ๋ฅผ response๋ผ๋ ๋ณ์์ ๋ด์
console.log(response) // ์๋ฒ์์ ์ค ๊ฒฐ๊ณผ๋ฅผ ์ด์ฉํด์ ๋๋จธ์ง ์ฝ๋๋ฅผ ์์ฑ
}
})
type : "GET" -> GET๋ฐฉ์์ผ๋ก ์์ฒญํ๋ค.
url : ์์ฒญํ url
data : ์์ฒญํ๋ฉด์ ํจ๊ป ์ค ๋ฐ์ดํฐ (GET ์์ฒญ์์ ๋น์๋์ธ์)
๋ฆฌ๋ง์ธ๋
GET ์์ฒญ์, url๋ค์ ์๋์ ๊ฐ์ด ๋ถ์ฌ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ๊ฐ๋๋ค.
http://naver.com?param=valueยถm2=value2
POST ์์ฒญ์, data : {} ์ ๋ฃ์ด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ๊ฐ๋๋ค.
data: { param: 'value', param2: 'value2' },
success: ์ฑ๊ณตํ๋ฉด, response๊ฐ์ ์๋ฒ์ ๊ฒฐ๊ณผ ๊ฐ์ ๋ด์์ ํจ์๋ฅผ ์คํํ๋ค.
๊ฒฐ๊ณผ๊ฐ ์ด๋ป๊ฒ response์ ๋ค์ด๊ฐ๋์? -> ๋ฐ์๋ค์ฌ์ผํ๋ค.
(๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ค๋ ๋ด๋ถ ์๋ฆฌ๋ ์ฝ๋๋ฅผ ์๋ฏ์ด๋ด์ ์๋ชจ๋ฅด๋, ์ผ๋จ ๊ทธ๋ฅ๋ณด๊ณ ๋ฐ์ ๋ค์ด๊ณ , ์ธ์์ผํ๋ค.