Front-end

Front-end] Ajax

김코식 2022. 11. 1. 11:31

Ajax

-빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나

 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신가능

 

ajax의 기본 골격

$.ajax({

   type: "GET",                            // http 요청 방식("GET","POST")

   url: "여기에URL을입력",         // http 요청을 보낼 서버의 주소

   data: {},                                   // http 요청과 함께 서버로 보낼 데이터

   success: function(response){  //서버에서 받은 데이터를 response 변수에 담음

   console.log(response)             

   }

})

 

ex)

<script>
  function q1() {
    $('#names-q1').empty()
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/seoulair",
      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"]
          if(gu_mise > 40){
             let a = `<li class = 'bad'> ${gu_name} : ${gu_mise} </li>`
          $('#names-q1').append(a)
          }else {
            let a = `<li> ${gu_name} : ${gu_mise} </li>`
            $('#names-q1').append(a)
          }
        }
      }
    })
  }

</script>
<body>
 <button onclick="q1()">업데이트</button>
 <ul id="names-q1"></ul>
</body>

동작

클릭시