Coding/스파르타코딩클럽

[스파르타코딩클럽] jQuery, Ajax 기초

폴밴 2022. 5. 6. 15:07

2주차에 배운 내용은 jQuery와 Ajax를 이용해 웹사이트를 제어하고 데이터를 요청하는 것이다.

1. jQuery

jQuery를 이용해 자바스크립트로는 길게 써야하는 것을 간단하게 쓸 수 있다.
코드에 import해야 사용할 수 있다.

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

CSS에서는 선택자로 클래스를 이용했다면, jQuery는 ID를 선택자로 사용한다.

input의 값을 .val을 통해 가져올 수 있다.

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

div 보이기, 숨기기

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

CSS 값 가져오기

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

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

태그 내 HTML 입력하기

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

2. Ajax

GET을 이용하여 JSON 형식의 데이터를 가져올 수 있다.
Ajax는 jQuery를 import한 페이지에서만 작동하므로, 반드시 jQuery가 필요하다.

Ajax 기본 골격

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

2주차 숙제

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .item-img {
            width: 500px;
            height: 300px;

            background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG");
            background-position: center;
            background-size: cover;
        }

        .price {
            font-size: 20px;
        }

        .item-desc {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .item-order {
            width: 500px;
        }

        .btn-order {
            margin: auto;
            width: 100px;

            display: block;
        }
        .wrap {
            width: 500px;
            margin: auto;
        }
        #rate{
            color: blue;
        }
    </style>

    <script>
        function order(){
            alert('주문이 완료되었습니다!');
        }

        $(document).ready(function () {
            $('#rate').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let ex_rate = response['rate']
                    let temp_html = `<span>달러-원 환율 : ${ex_rate}</span>`
                    $('#rate').append(temp_html)
                }
            })
        });

    </script>
</head>

<body>
<div class="wrap">
    <div class="item-img"></div>
    <div class="item-desc">
        <h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>
        <p>이 양초는 사실 특별한 힘을 지니고 있어요!</p>
    </div>
    <p id="rate">
        <span>달러-원 환율 : </span>
    </p>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
    </div>
</div>
</body>

</html>
저작자표시 비영리 변경금지

'Coding > 스파르타코딩클럽' 카테고리의 다른 글

[스파르타코딩클럽] AWS, Flask  (0) 2022.05.27
[스파르타코딩클럽] Flask, API  (0) 2022.05.26
[스파르타코딩클럽] 파이썬, 웹스크래핑(크롤링), DB, pymongo  (0) 2022.05.13
[스파르타코딩클럽] HTML, CSS, Javascript 기초  (0) 2022.05.04

'Coding/스파르타코딩클럽'의 다른글

  • 현재글[스파르타코딩클럽] jQuery, Ajax 기초

관련글

댓글

티스토리툴바