GET방식을 이해하고 JQuery를 학습하며, JSON api를 가져와 ajax로 다뤄봄
[jQuery] : HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 것,라이브러리
기본적인 text타입 id안쪽의 value값을 가져올 때
let a=$('#id명').val()
기본적인 ajax코드 해설
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair", //요청할 url
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value&m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },
예제1) 버튼 클릭 시 요소 보이기,숨기기
<script>
function open_box(){
$('#post-box').show() // $('').show()
}
function close_box(){
$('#post-box').hide() // $('').hide()
}
</script>
예제2) jQuery + Javascript 조합 예제
예시로 위에서 빈칸에 abc12@naver.com입력시 아래와 같이 alert 창이 뜨게 하며
이메일이 아닌경우(@가 없을경우) '이메일이 아닙니다' alert 출력
HTML
<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>
Javascript
function q2() {
let a=$('#input-q2').val()
if(a.includes('@') == true) { //includes('')는 ''안에 값이 있을 경우 true반환
let b=a.split('@')[1].split('.')[0] //split('')은 ''안의 값으로 문자를 나눈 뒤, 배열안에 담음
alert(b)
}
else{
alert('이메일이 아닙니다.')
}
}
이름을 넣으면 아래와 같이 출력
HTML
<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
Javascript
function q3() {
let a=$('#input-q3').val()
let b= `<li>${a}</li>` // ''가아닌 ``(백틱)유의
$('#names-q3').append(b) // 요소 추가 $('#id명').append()
}
function q3_remove() {
$('#names-q3').empty() // 요소 전부 삭제 $('#id명').empty()
}
예제3) Open api를 ajax로 가져온 뒤 jQuery와 함께 웹에 구현
업데이트를 누를 시 아래와 같이 구현
<script>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET", //GET방식 요청
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, //요청하면서 함께 줄 데이터 (GET 요청시 비워져있음)
success: function (response) { // 서버에서 준 결과를 response 변수에 담음
console.log(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 > 75){
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
console.log(response['RealtimeCityAir']['row'])
}
})
}
</script><li class="bad">는 따로 css에서 color='red'로구현
<html>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
배운점
실습 과정에서 백틱(`)이아닌 '로 입력해 무엇이 잘못인지 15분동안 헤맨 기억이 남아있다. HTML요소를 가져올 땐 백틱(`)으로 가져옴을 유의하자 또한 $('#id명').val()에서 val()은 #id명의 value 값을 가져온다는 의미로 일반적인 예제로 let a='aba133@naver.com' 를 split으로 나눈다고 할 때, a.split('@') 또는 a.toString().split('@') 으로 나눌수있다. 그러나 a.split('@').val() 로 또 잘못 사용하여 10분 동안 해맸다. 간단한 문법을 잘 확인하자
'항해 부트캠프 > 스파르타 코딩 교육' 카테고리의 다른 글
| 스파르타 코딩 교육) 웹 개발 종합 교육 5주차 개발일지 (0) | 2022.06.14 |
|---|---|
| 스파르타 코딩 교육) 웹 개발 종합 교육 4주차 개발일지 (0) | 2022.06.09 |
| 스파르타 코딩 교육) 웹 개발 종합 교육 3주차 개발일지 (0) | 2022.06.07 |
| 스파르타 코딩 교육) 웹 개발 종합 교육 1주차 개발일지 (0) | 2022.05.23 |
