강의자료
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다.
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
-
Ajax코드해설
$.ajax({type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair", // 요청할 url
data: { param: 'value', param2: 'value2' }, // POST 요청하면서 함께 줄 데이터, (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
- 이미지 바꾸기 :
$("#아이디값").attr("src", 이미지URL); - 텍스트 바꾸기 :
$("#아이디값").text("바꾸고 싶은 텍스트");
메모
<jQuery란>
HTML 요소들을 조작하는 Javascript를 미리 작성해둔 라이브러리
(누군가가 짜둔 css = 부트스트랩)
- CSS 의 CLASS 처럼, JQUERY 에선 ID !
$('#url').val('입력값')
id=url에다가 jquery 적용
그곳에 입력하는 값 = .val('입력값')
입력값을 알기위해서는 = $('#url').val('')
('#post-box').hide() = 숨기기('#post-box').show() = 보여주기
let temp_html = 물결표시 shift키 누르지않은키
$('#cards-box').append(temp_html)
cards-box에다가 temp_html의 값을 html화 하겠다
$('#cards-box').empty()
지우고 호출(?)
display: none; = 초기화면에 노출안함
console.log(txt.includes('@'))
console창에서 @포함여부 확인해보기 (true/false)
if (txt.includes('@') == true) {
alert(txt.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다.')
}
<json이란>
서버로부터 데이터를 받아오는것
서버-클라이언트 통신 이해하기
-
클라이언트가 요청할때 타입이라는 것이 있다
-
GET: 데이터 조회(Read) 요청
? : 여기서부터 전달할 데이터가 작성됨
& : 전달할 데이터가 더 있다는 뜻 -
POST: 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청
<Ajax란>
브라우저에서 엔터치는것과 같이 자바스크립트에서 어떻게 데이터를 요청하느냐
-
json형식 딕셔너리와 리스트가 합쳐진 형태로 보임
-
기본골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
- 이미지 바꾸기
$("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 :
$("#아이디값").text("바꾸고 싶은 텍스트");
