j Query와 Ajax

1) jQuery 란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

1) 코드가 복잡하고,

2) 브라우저 간 호환성 문제도 고려해야해서 jQuery라는 라이브러리가 등장

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드.

전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

Ex)Javascript로 길고 복잡하게 써야 하는 것을

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

jQuery로 보다 직관적으로 쓸 수 있음

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

Ajacx

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

Ajax를 이용한 온도넣기

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

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

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
</head>
<style>
    * {
        font-family: 'Nanum Brush Script', cursive;
    }

    .mytitle {
        width: 100%;
        height: 250px;

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA3MThfMjMy%2FMDAxNjU4MDk2NTI3NDEw.mICxv4Ou_tDaBPhr_ZEW3TZ_SoNlhYc1TIIOcdnNzDYg.7IEWkwqQ09FYb1NTkA2fUpMFGjOwt4e2cKRqYGjIvIsg.JPEG.0905nam%2FIMG_2788.JPG&type=sc960_832");
        background-position: center;
        background-size: cover;

        color: white;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mypost {
        max-width: 500px;
        width: 95%;

        margin: 20px auto 0 auto;

        box-shadow: 0px 0px 3px 0px;
        padding: 20px;
    }

    .box {
        margin-top: 10px;
    }
    .card {
        max-width: 500px;
        width: 95%;

        margin: 10px auto 0 auto;
    }
</style>
<script>
    $(document).ready(function(){
   $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
          data: {},
          success: function(response){
              let temp = response['temp']
              $('#temp').text(temp)
            }
          })
});
</script>

<body>
<div class="mytitle">
    <h1>저스디스 팬명록</h1>
    <p>현재기온 : <span id="temp">00.0도</span></p>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <div class="box">
        <button type="button" class="btn btn-dark">응원 남기기</button>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">개코<cite title="Source Title"></cite></footer>
        </blockquote>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>딕션 오지네요</p>
            <footer class="blockquote-footer">사이먼 디<cite title="Source Title"></cite></footer>
        </blockquote>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>앨범 퀄 좋네요</p>
            <footer class="blockquote-footer">비와이<cite title="Source Title"></cite></footer>
        </blockquote>
    </div>
</div>
</div>
</body>

</html>

비버스토리

j Query와 Ajax

티스토리툴바