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>동작
'Front-end' 카테고리의 다른 글
| Front-end] Javascript (0) | 2022.11.01 |
|---|---|
| Front-end] Html , Css (0) | 2022.11.01 |
