본문 바로가기

Spring 3/jQuery with Spring

jQuery with Spring

Spring 에서 jQuery 사용하는 예



1. 정적 리소스 파일을 저장하는 경로로 지정된 디렉토리에 jQuery.js 파일을 저장한다

2. JSTL-1.2.jar 파일을 프로젝트에 설치한다.

3. jQuery 를 사용하는 페이지에서 jstl <c:url > 태그를 사용하여 jQuery 라이브러리 파일을 참조한다


정적 리소스 파일의 경로 확인


servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans:beans xmlns="http://www.springframework.org/schema/mvc"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xmlns:beans="http://www.springframework.org/schema/beans"

    xmlns:context="http://www.springframework.org/schema/context"

    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd

        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd

        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">


    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->

    <!-- Process annotations on registered beans like @Autowired... -->

    <context:annotation-config/>

    

    <!-- Enables the Spring MVC @Controller programming model -->

    <annotation-driven />


    <context:component-scan base-package="org.kdea.java" />

    <context:component-scan base-package="org.kdea.service" />


    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->

    <resources mapping="/resources/**" location="/resources/" />


    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->

    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

        <beans:property name="prefix" value="/WEB-INF/views/" />

        <beans:property name="suffix" value=".jsp" />

        <beans:property name="contentType" value="text/html; charset=UTF-8"/>

    </beans:bean>


</beans:beans>



위의 설정파일 ( servlet-context.xml )에 선언된 <resources> 요소는 웹사이트의 정적 리소스들(*.js, *.jpg, *.css 등)이 위치하는 디렉토리로 설정되어 있기 때문에 해당 디렉토리에 jQuery 라이브러리(*.js) 파일을 복사해 두면 된다. 그러므로 Maven 프로젝트라면 webapp/디렉토리 아래에 resources 디렉토리를 생성하고 resources 디렉토리 안에 jQuery 라이브러리를 복사해두면 된다.



정적 리소스 파일의 경로에 jQuery 라이브러리를 저장




jstl-1.2.jar 라이브러리 설치


jstl1.2.jar 파일이 필요하므로 http://mvnrepository.com 에 접속하여 'jstl' 키워드로 검색하여 jstl 1.2 버전을 찾아서 해당 dependency 태그를 복사하여 Maven 프로젝트의 pom.xml 파일에 추가하면 해당 라이브러리가 로컬 시스템에 다운로드되어 설치된다



jQuery 사용 페이지에서 <c:url>을 사용하여 jQuery 라이브러리를 참조

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery with Spring</title>


<script src="<c:url value="/resources/jquery-2.1.1.min.js"/>"></script>


<script type="text/javascript">

$(document).ready(function(){

alert('jQuery ready!');

})

</script>


</head>

<body>


</body>

</html>