ajax... 어려워 ㅠㅠㅠ
강의중 설명 : Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다.
ex) 버튼 클릭시 현재 서울의 날씨 실시간으로 불러오기
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function (response) {
console.log(response)
}
})
}ajax의 기본 구조! type은 두가지가 있는데 우리가 가장 일반적으로 이용하는 get을 사용해 보려고 한다.
response는 그냥 외워
get 은 말그대로 원하는 url 에서 원하는 정보를 끌어오는 것
url 자리에 끌어오고 싶은 정보를 포함하는 링크를 붙인다.
console.log(response)의 경우는 페이지에서 검사창에 콘솔 창에서 제대로 동작하는지 확인하기 위한 수단으로 직접적으로 눈에 보이는 결과는 보이지않는다. 그냥 한번 확인해 보는 수단(?) 해보고 제대로 되면 지운다.
EXERCISE1. 새로고침 버튼을 클릭시 실시간 미세먼지 날씨가 나타나게 해보자!
이런식의 정보가 실시간으로 뜨는 URL이라고 해보자
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
rows를 'RealtimeCityAir'안의 'row'값이라고 해보자 ->> row안의 모든 사항이 콘솔에 보여짐
for문은 모든것을 나열할때 사용하는 자주 쓰는 문법 구절(?)이다! 익숙해질것
gu_name을 rows( 'RealtimeCityAir'안의 'row'값)의 MSRSTE_NM즉 구 이름 이라고 하자!
gu_mise을 rows( 'RealtimeCityAir'안의 'row'값)의 INDEX_MVL즉 구의 미세먼지 수치 라고 하자!
[i]는 for문에서 규정한 순서대로 나오는 애들...(?)
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html);temp-html 사실 아직도 얘가 뭔지 잘 모르겠음 그냥 지정해주는 이름인거 같긴한데 뭐 어떤상황에 어떻게 사용하는지는 하다보면 알거같음
암튼
temp-html은 꼭 `` 사용할것 ''작은따옴표 아니고 ~얘아래있는 빽틱!!!!!!1
리스트형태로 구이름 : 미세먼지농도 대치시켜서 나올 예정
아래 바디에
<ul id="names-q1">
</ul>지정해서 위에 #names-q1 을 내가 지정한 리스트형태의 구이름 : 미세먼지농도로 도출되게 함
응용예제 만일 미세먼지의 농도가 60이 넘으면 도출 값의 글자를 빨간색으로 지정하고싶다!
하면 스타일에서 글자색을 빨강으로 만드는 스타일 하나를 만들어둠.
예를들어
.bad{
color: red;
}이렇게 style에 넣어둠 그리고 스크립트에 적용
let temp_html = ``
//빈문자열 생성..
음 얘는왜 빈문자열을 생성하는지 이해가 안됨... temp_html을 그냥 문자열이라고 지정해주는건가..?
if문 사용시에 이런식으로 넣는것 같음
(이때 위에서 사용한 let temp_html지워주기)
if (gu_mise > 60){
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
}
else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)if문 사용해서 gu_mise 미세먼지의 수치가 60이 넘어갔을떄 리스트의 클래스를 bad로 지정해주고 아니라면 bad 클래스를 적용시켜주지 않는다.
마지막으로 버튼에 적용하기 위해서는
button onclick="q1()"온클릭 하고 지정한 이름으로 연결시켜줘야 동작됨
EXERCISE2. 이미지 GET으로 끌고와서 클릭시 변하게 하기
- 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
- 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
success: function (response) {
let url = response['url']
let msg = response['msg']
$('#img-rtan').attr('src',url)
$('#text-rtan').text(msg)
}src는 html의 img태그의 필수 항목
ex1의경우 데이터의 항목 값이 많아 앞이 복잡한것 같아...
EXERCISE3. 클릭이 아닌 새로고침시 바로 데이터를 띄워주는 방식
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let temp = response['temp']
$('#temp').text(temp)
}
})
});function앞에 뭔가뭔가를 더붙여줌...
아무튼 2주차는 너무어렵다 여러번 만들어 봐야할것 같음
댓글