JQuery와 ajax는 뭘까

Tommy·2022년 4월 28일
0

JQuery란 & 다뤄보기

  1. Jqeury란, HTML을 조작하는 Javascript의 복잡한 코드를 간편하게 이용하게해주며, 브라우저 간 호환성 문제를 고려하여 나온 라이브러리

  2. 필요한 것은, 부트스트랩처럼 head /head 태그 사이에 아래 jQeury CND를 입력해야함
    "태그script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jqeury.min.js"></script태그
    여기서 태그는 >< 를뜻함(태그가 안먹힘ㅠ)

  3. CSS가 class선택자로 변경할 부분을 지정한다면, jQuery는 id선택자로 변경할 부분을 지정한다.

  4. 주된 사용은, $('#id').주문 <- 이렇게 사용한다. 예)id = testid 라면,

    id의 값을 불러옴 - $('#testid').val()

    id에 입력함 - $('#testid').val(입력내용)

    id의 CSS값 확인(width값 변경) - S('#testid').css('width','50px')

    id의 값 보이기 - $('#testid').show()

    id의 값 숨기기 - $('#testid').hide()

    id에 어떤코드 붙이기 - $('#testid').append(변수)

    id에 글 적기,불러오기 - $('#testid').text(바꾸고싶은글)

    id에 이미지 변경 - $('#testid').attr("src", 이미지URL)

결론은, jQuery를 사용하여 특정 부분의 자바스크립트의 기능을 수월하게 도와주는 역할을 한다.
어떤 변수를 특정한 곳에 붙이든지 불러온다든지, 한마디로, 특정 부분을 콕 찝어서 조작해주는 쉬운 툴.

ajax란 & 다뤄보기

ajax란, 서버와 통신할 때 사용하는 방법.
서버와 통신할 때 사용하기에, api를 이용한다. 그러기에 api 가독성이 좋은 크롬에 JOSNView을 설치해야 좋다.
https://chrome.google.com/webstore/detail/jsonview/cklaanhfefbnpoihckbnefhakgolnmc?h1=ko

여러가지 타입이 있지만, 통상적으로는 GET, POST 타입이 주로 쓰인다.

GET은, 보통 데이터 조회(Read)를 요청할 때 사용(우리가 검색엔진에 엔터치는 행위)
POST는, 보통 생성(Creat), 변경(Update), 삭제(Delete)요청할 때 사용

Ajax의 기본 공격은,

$.ajax({
type: "GET",
url: "",
data: {},
success: function(response){
console.log(response)
}
})

type은 "GET", "POST" 선택
url은 내가 사용하길 원하는 API URL주소 입력
data는 GET이면 비워두고, POST면 요청하면서 함께 줄 데이터 입력
success에 response를 가지고 API의 재료를 이용하여 문법을 사용하여 이용하면 된다.

profile
인간미가 느껴지는 개발자가 되고있는 드리머

0개의 댓글