Ajax 기본 및 예제

Ajax는 반드시 JQuery가 임포트 된 곳에서만 적용됨.

​

서버가 클라이언트한테 데이터를 내려줄 때 그 포맷을 JSON 이라 하는데,

(* JSON 형식 = 딕셔너리와 리스트의 조합과 생김새가 똑같음)

​

Ajax는 JSON을 좀 더 편하게 내려받기 위한 방법.

 

기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

만약 저 url을 입력하면 url의 값을 모두 response가 가지고 오는것. response가 아니더라도 상관없지만 보통 response로 작성함.

해당 html페이지에 response가 들어온다고 이해하면 됨.

 

---

Ajax 예제

       function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                    let Exchange_rate = response[1]['rate']
                    $('#dal').append(Exchange_rate)
                }
            })
        });

 

q1 함수가 실행되었을 때

Ajax를 콜 한다.

그 후 Exchange_rate란 변수를 만들고,

미리 설정해둔 id 값인 dal에 Exchange_rate를 넣어준다.

 

---

Ajax 예제2

function q1() {																				
    $('#names-q1').empty()																				
    $.ajax({																				
        type: "GET",																				
        url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99"	
        data: {},																				
        success: function (response) {																				
            let rows = response['RealtimeCityAir']['row']																				
            for (let i = 0; i < rows.length; i++) {																			
                let name = rows[i]['MSRSTE_NM']																			
                let mise = rows[i]['IDEX_MVL']																				
                let temp_html = `																		
                <li>${name} : ${mise}</li>																				
                `																		
                $('#names-q1').append(temp_html)												
            }																				
        }																				
    })																				
}		

 

function q1() {

q1 함수가 실행되었을 때

​

$('#names-q1').empty()

ID 값인 name-q1을 비우고

​

$.ajax({ ~~ success: function (response) {

Ajax 콜을 한 뒤에

​

let rows = response['RealtimeCityAir']['row']

rows란 변수를 만들고

​

for (let i = 0; i < rows.length; i++) {

반복문 for로 rows를 한 바퀴 돌린다.

​

let name = rows[i]['MSRSTE_NM']

let mise = rows[i]['IDEX_MVL']

rows 안에서 name, mise의 변수를 정해주고

​

let temp_html = `<li>${name} : ${mise}</li> `

temp_html을 name, mise로 정해준다.

(※ temp_html을 변수로 만들땐 반드시 1옆에 있는 백틱 ( ` ` ) 을 사용해야한다)

​

$('#names-q1').append(temp_html)

$('#names-q1').append(temp_html) - 그 후 names-q1 이란 id에 temp_html을 붙여준다.

---

Ajax 예제3 (IF문)

let temp_html = ''														
														
if (mise > 70) {														
    temp_html = `<li class="bad">${name} : ${mise}</li>`														
} else {														
    temp_html = `<li>${name} : ${mise}</li>`														
}														

let temp_html = ' '

먼저 temp_html 칸을 공백으로 남겨 둔다.

(※이 때의 temp_html 은 백틱 ` ` 이 아니라, 따움표 ' ' 다)

​

if 나 else 로 temp_html의 설정을 정해준다.

​

이렇게 하면 temp_html을 append 할 때 if문을 활용할 수 있다.

​

위 예제는 if문을 활용하여 변수 mise 값이 70 이상인 경우에만 미리 css에 설정해둔 bad를 따로 먹이고 있다.