javascript(자바스크립트) ajax 함수 사용방법

javascript(자바스크립트) ajax 함수 사용방법

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능!!

ajax 기본 골격 (충분히 안에 옵션(type, url , data 등등 추가하거나 삭제해서 사용 가능!!!!)

( 초보자인 나에게는 해당 코드가 익숙해지면 응용하는 방향으로 진행하기 )

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

옵션에 대한 설명

type : "GET","POST" 등의 통신 방식을 지정

url : 통신을 원하고자 하는 url 입력 ( 오픈api 등등)

data : 서버로 보낼 데이터 입력 ( type 방식에서 "GET" 인경우에는 비워두세요)

success : 성공하면, reponse 값에 서버의 결과값을 담아서 함수 실행

*기본 고정코드 (빨간색) / 변경 가능한 값(파란색)

$.ajax({

type: "GET",

url: "여기에URL을입력",

data: {},

success: function(response){

console.log(response)

}

})

check point

1. console.log(response) 사용하여서 잘 찍히는지 확인 후 삭제

응용VER

$.ajax({ type: "GET", url: "http://spartacodingclub.shop/post", data: {}, success: function (response) { let articles = response['articles']; //'articles'는 위에 url 에서 검사하면 나오는 리스트명 for (let i = 0; i < articles.length; i++) { let article = articles[i]; let image = article["image"]; let url = article["url"]; let title = article["title"]; let desc = article["desc"]; let comment = article["comment"]; let temp_html = ` // 가지고 와야하는 데이터를 선언해준뒤, 꼭 temp_html활용하기 ${title} ${desc} ${comment} `; $('#cards-box').append(temp_html); } } }) }

from http://daojiong.tistory.com/12 by ccl(A) rewrite - 2021-12-28 22:01:27