BACKEND/스프링 Spring

Spring MVC jQuery $ 사용 예제

꾸준히개발하자 2024. 1. 14. 21:48

 

 

Spring MVC와 함께 jQuery를 사용하는 기본적인 문법

 

jQuery는 JavaScript 라이브러리로, HTML 문서의 이벤트 처리, 애니메이션, Ajax 통신 등을 쉽게 할 수 있게 도와줍니다. jQuery를 사용하려면 먼저 HTML 페이지에 jQuery 라이브러리를 포함해야 합니다.

 

 

 

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

 

jQuery 라이브러리 포함: HTML 페이지의 <head> 섹션에 다음 코드를 추가합니다.

 

기본 문법:

  • 문서 준비 이벤트: 페이지 로드 시 실행되는 스크립트입니다.
$(document).ready(function(){
    // 여기에 코드 작성
});

 

요소 선택: HTML 요소를 jQuery로 선택하는 방법입니다.

$("#myId") // ID가 myId인 요소 선택
$(".myClass") // 클래스가 myClass인 모든 요소 선택
$("p") // 모든 <p> 요소 선택

 

이벤트 처리: 요소에 이벤트 리스너를 추가합니다.

$("#myButton").click(function(){
    // 버튼 클릭 시 실행될 코드
});

 

HTML/CSS 조작: 요소의 HTML이나 CSS를 조작합니다.

$("#myElement").html("새로운 내용"); // HTML 내용 변경
$("#myElement").css("color", "blue"); // CSS 속성 변경

 

 

Ajax 요청: 서버에 비동기 요청을 보냅니다.

$.ajax({
    url: '/myEndpoint',
    type: 'GET', // 또는 'POST'
    success: function(response){
        // 요청 성공 시 실행될 코드
    },
    error: function(error){
        // 요청 실패 시 실행될 코드
    }
});

 

Spring MVC와 함께 jQuery를 사용할 때, 주로 서버로부터 데이터를 비동기적으로 가져오거나,

페이지의 일부분만을 갱신하는 데에 많이 사용됩니다.

이러한 방식으로 사용자 경험을 향상시킬 수 있으며, 동적인 웹 페이지를 만드는 데 도움이 됩니다.

저작자표시