springMVCで外部jsファイル(jquery)を読み込む方法

spring

springMVCのJSPファイルでも、他MVCフレームワーク(struts等)と同じように外部ファイルを読み込むことが可能です。

昨今では外部jsファイルと言えば「jquery」を使わない場面は少なくなりました。今回は、jqueryをspringMVC内で読み込む方法を解説します。

jQueryは、「/webapp/resources/js」配下に設置することを想定して解説を進めていきます。

[スポンサーリンク]

この章でやること

jspで外部jsファイル(jquery)を読み込みます。

外部jsファイル(jquery)を読み込むサンプルソース

コントローラクラスとjspとjqueryファイルの設置場所をサンプルソースをもとに解説します。

コントローラクラス

@Controller
public class JqueryController {

	@RequestMapping(value = "/js", method = RequestMethod.GET)
	public String js(HttpServletResponse response, Locale locale, Model model) {
		return "js";
	}
}

JSP

ハイライトになっている箇所のようにして外部jsファイル(jquery)を読み込みます。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>sample</title>

<script src="<c:url value="/resources/js/jquery-1.8.2.js" />" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery-ui-1.9.1.custom.js" />" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                alert('ok');
            }
        );
    } );
</script>
</head>

<!-- HTML部分 -->
<body>

<h1>sample</h1>
<p><input type="button" id="ajax-button" value="gooo" /> <br />
</p>
<div id="sample-result"></div>

</body>
</html>

jqueryの設置場所

「/webapp/resources/js」配下に外部jsファイル(jquery)を設置します。

read-javascript

解説

springMVCの外部jsファイルを設置する箇所もstruts等でおなじみのフォルダと同じ箇所となります。
あまり迷うことはありませんね。

JSP側での読み込み方も、「」のようにcタグを使っています。こちらもWebアプリ開発をされている方であればおなじみのタグです。springMVC特有のタグではありません。

springMVCのバージョン

org.springframework-versionは、3.1.0を使っています。
javaは、1.6.0を使っています。

jqueryのダウンロード先

こちらからダウンロードして下さい。

最後に

Webの世界において、jqueryを使う場面は年々増えているように感じます。
用途にもよりますが、Web画面を表現するのであれば、springMVCのJSPにおいてもjqueryは必須といってもよいと思います。
といっても、そんなに難しくもなく、javaプロジェクトのセオリー通りの場所に設置すればよいだけです。