javascript 줄임말- jQuery 문법
https://sunnyscript.tistory.com/14
서버 통신에서 보내주는 JSON형식의 데이터
https://sunnyscript.tistory.com/17
Ajax
https://sunnyscript.tistory.com/18
과제 오류 원인
1. 스크립트문법 ( jQuery문법 $~~~) 안에 또 스크립트 문법$~~~ 들어갈 수 있음.
$(document).ready(function() { ~~~
$.ajax ({~~~~
success: function(response) { ~~~
$("#temp").text(response)~~~
2. 텍스트 바꾸는 문법
$("#부여한_이름").text("바꾸려는 텍스트") -----> txt 아님. '' 작은따옴표 아님.
3. (응용) 온도부분을 <span>으로 따로 빼지 않고도 쓸 수 있지 않은가?
$(document).ready(function() {
$.ajax ({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function(response) {
let temp = response['temp']
let temp_html = `현재기온 : ${temp}도`
$("#temp").text(temp_html)
}
})
});1) 백틱 `` 에 대한 이해 - 백틱안에 문자열 가능(따옴표 필요없음) / ${} 가능
2) 백틱안에 <p></p> 썼더니 그대로 출력됨 --> id값 부여한 위치에 대한 이해 필요
3) 텍스트 바꾸기 문법 $("#부여한_이름").text("바꾸려는 텍스트") 안에 ${} 인식 불가함. ----->왜일까...
4. <body>부분에 만들어놓은 뼈대 모양대로(html템플릿) 불러오는 데이터를 채워넣고싶다면,
<script>에 function
-> $.ajax콜 -> (콘솔불러와보기)
-> 리스트가 많으면 let rows 설정하고 돌리기 -> (콘솔불러와보기)
-> let 미니변수들 설정 -> (콘솔불러와보기)
-> let temp_html 설정 (백틱 안에 원하는 뼈대부분 복붙)
-> 복붙한 뼈대에 변수부분 ${미니변수}로 바꾸기
-> 뼈대내용 붙이기 .append(temp_html)
-> ajax 콜 날리기전에 내용 비워주기 .empty()
'웹개발 종합반' 카테고리의 다른 글
| 파이썬패키지 - Requests (0) | 2022.08.08 |
|---|---|
| 파이썬 패키지 (0) | 2022.08.08 |
| javascript 줄임말 jQuery 문법 (0) | 2022.08.02 |
| <script>에 입력하는 움직임기능태그 javascript 기초 (0) | 2022.08.01 |
| CSS로 모바일처리 하기 (0) | 2022.07.29 |