Ajax

API

정당성

서로 소통할 수 있게 해주는 메커니즘

방법

POST: 데이터 생성, 수정, 삭제

GET: 데이터 가져오기

JSON 형식

정당성

데이터 공유를 위한 표준 파일 형식

아약스

정당성

JavaScript를 통해 서버에서 비동기식으로 데이터 요청 모양

$.ajax({
type: "GET",
url: "URL",
data: {},
success: function(response){
console.log(response)
}
})

AJAX를 사용하여 데이터를 로드하여 함수 생성

<style>
	.bad {
   	 color: red;
 	 }
</style>
<script>
  function q1() {
    $.ajax({
      type: "GET",
      url: "http://url",
      data: {},
      success: function (response) {
        $('#names-q1').empty();
        let rows = response("RealtimeCityAir")("row");
        for (let i = 0; i < rows.length; i++) {
          let mise = rows(i)('IDEX_MVL');
          let city = rows(i)('MSRSTE_NM');
          let temp_html="";
          if (mise > 40) {
            temp_html = `<li class="bad">${city} : ${mise}</li>`;
          } else {
            temp_html = `<li>${city} : ${mise}</li>`;
          }
          $('#names-q1').append(temp_html);
        }
      }
    });
  }
</script>

이미지를 JQuery로 바꾸기

$("#img-id").attr("src", url);

JQuery를 사용한 텍스트 자바스크립트 교체 로딩 후 바로 실행

$("#text-id").text(msg);

Javascript는 로딩 직후에 실행됩니다.

$(document).ready(function () {})