[jQuery, Ajax] 기본개념

doyeonlee·2022년 1월 24일
0

개발일지 2022

목록 보기
4/16
post-thumbnail

Ajax의 개념

API는 창구이며, json 형식을 쓴다.
리스트, 딕셔너리와 비슷하다.

그 예시로 row아래 for문이 들어가는 것이 있으며, 이는 전형적인 형태이다.


ajax 기본형식과 해석

기본형식 + 해석

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

ex)

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 gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

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


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

이러한 코드가 <script></script>안에 들어간다.
script는 head안에 style 밑에 위치한다.
순서대로 하자면

<head>

<title> </title>

<style> </style>


<script> </script>


</head>

대략 이런 순서


type : GET, POST

요청 타입을 뜻하며, GET과 POST가 있다.

GET : Read 요청 (조회)
ex) 브라우저에서 검색활동할때 enter 치는 행위 = GET 요청 행위

POST : Create, Update, Delete 요청 (생성, 삭제, 업데이트)
add) 위의 코드 예시에서 data : {}, 는 POST할 때 쓰인다.


function (response) {}

function () 안에는 통상적으로 response가 쓰인다.

예시 코드와 그 해석

ex_1)

for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

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

ex_1) 해석

for (let i = 0; i < rows.length; i++) { 
// 그냥 외우자
	let gu_name = rows[i]['MSRSTE_NM']
    // gu_name은 rows에 있는 변수 중 MSRSTE_NM이다.
    let gu_mise = rows[i]['IDEX_MVL'] 
    // gu_mise는 rows에 있는 변수 중 IDEX_MVL이다.
    // -> let ~ 는 정의 해주는 것
    
    let temp_html = ``
    // temp_html은 `` 이다.
    
    if (gu_mise > 70) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
 // 만약에 gu_mise가 70보다 크다면, temp_html은 출력된 '구 이름 : 구 미세먼지 수치'가 class에 정해진 조건으로 출력된다. 그렇지 않다면, temp_html은 그냥 출력된 '구 이름 : 구 미세먼지 수치'로 출력된다.
    
}

버튼 누를 때마다 업데이트 - 예시 + 해석

ex_2)

function q1() {

........



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

}

ex_2) 해석 + 문제해결

function q1() {

........
// function 내부에 위의 ex_1과 같이 내용 담긴 후에


$('#names-q1').append(temp_html)
// append를 이용해 버튼을 누를때마다 데이터가 나오게 한다.
//(뒤에 body에 button부분에 onclick을 붙임)
// -> 문제는 데이터가 '새로' 써지진 않는다는것. 
// 그냥 원래 있던거 밑에 추가적으로 붙기만 하는 현상 발생

}
function q1() {
 $('#names-q1').empty()
 // function 밑에 바로 empty 함수를 붙여준다. 
 // 이러면 ajax 기본 형태가 돌아가기 전에 먼저 empty를 만나서 데이터 환기를 시켜줘서 추가적으로 붙는 형상 없앨 수 있음.
 
 
........// => ajax 기본 형태



$('#names-q1').append(temp_html)
// 붙여줌

}

누를때마다 업데이트 가능
append를 쓸 경우, 조건을 보고 누를'때마다'가 조건이면 function 바로 밑에 empty 써주자.

profile
느려도 천천히 꼼꼼하게 !

0개의 댓글