👨‍💻 [풀스택] jQuery, Ajax

 ✏️오늘 배울 내용

 

Javascript로 다시 서버에 데이터를 요청하고 받는 법

jQuery을 이용해 Javascript로 HTML 쉽게 제어

Ajax이용해 다시 서버에 데이터를 요청하고 받아보기

 

🔎 jQuery

미리 작성된 javascipt code 즉, 남이 짜둔 자바스크립트 코드이다.

부트스트랩처럼 이를 가져다 쓰면 된다.

📌Javascript

document.getElementById("element").style.display = "none";

📌jQuery

$('#element').hide();

Javascripts는 길고 복잡, jQuery는 보다 직관적.

 

단, 쓰기전에 import를 해야 함!

 

🔎 jQuery import

 

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

< head>와 </head>사이에 입력해주면 끝!

 

🔎 jQuery 사용법

css에서 class로 가리켜 조작했다면,

jQuery에서는 id값을 통해 특정 버튼/인풋박스/div 등을 가리킨다.

<div class="posting-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
            placeholder="">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">간단 코멘트</label>
        <input type="password" class="form-control" placeholder="">
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

클라이언트쪽 input 박스에 사용자가 www.naver.com  을 입력했다.

📌그럼 이 값을 가져오기위해서 input박스의 id인 post-url을 가르킨다.

$('#post-url').val();

 

📌 숨기기

$('#post-box').hide();
$('#post-box').css('display');

display 속성 값을 가져와 볼 수도 있다.

 

📌 보이기

$('#post-box').show();
$('#post-box').css('display');

 

📌 텍스트 입력

input box인 경우

$('#post-url').val('여기에 텍스트를 입력하면!');

다른 것들

$('#btn-posting-box').text('포스팅 박스 닫기');

 

📌 버튼 넣어보기

let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

 

📌 카드 넣어보기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

 

✏️서버- 클라이언트 통신하기

🔎 미세먼지 OpenAPI

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

🔎 Jsonview

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko

JSONView

 

🔎 Jsonview

JSON은 Key:Value로 이루어져 있으며 자료형 Dictionary와 아주 유사.

리스트 안에 딕셔너리 여러개 들어있는 형태와 같다.

 

🔎 API

은행창구와 같은 것.

가져와야 하는것 / 처리해 주는것이 다른것처럼 클라이언트가 요청할 때도 '타입'이 존재

 

🔎 CRUD

📌 GET

데이터를 조회(Read) 요청 할 때

📌 POST

데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때

 

🔎 Ajax

Ajax는 jQuery를 임포트한 페이지에서만 동작

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

• type: "GET" → GET 방식으로 요청
• url: 요청할 url
• data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
• success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});