1. 程式人生 > >jsp.html中的引入js.css檔案的問題,以及檔案路徑詳解。

jsp.html中的引入js.css檔案的問題,以及檔案路徑詳解。

首先我把檔案的位置已截圖的形式發出(eclipse工作欄), 看清楚各個檔案路徑的位置。

</pre>其中test1.css中寫了一個測試程式碼:</p><p><pre name="code" class="html">.AAA{ color:yellow;text-align:center;}

來測試jsp的引入方式:

在test1.jsp 檔案中引用jquery和css一共五個檔案。程式碼如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/test1.css">
	<script type="text/javascript" src="js/jquery/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="js/jquery/jquery.easyui.min.js"></script>
<title>測試 JQuery</title>
</head>
<body>
	<div class="AAA">show it.</div> 
</body>
<script type="text/javascript">
	$(function(){
		alert("OK,JQuery is run.");
	});
</script>
</html>
顯示效果如下:

********************************************************************************************************************************

*********************************************************************

說明:

在jsp檔案中y這種方式引入檔案

js和css引入成功。(路徑是從WebContent檔案下開始寫的,路徑的第一個沒有加"/"。)

還有一點要提一提:


這是用來獲取根目錄的路徑  一般在做超連線的時候用這個 還有就是在做刪除檔案的時候使用 使用它的好處是為了防止路徑錯位

<%
String path = request.getContextPath();
%>

<li><a href="<%=path%>/index.jsp" >首頁</a></li>
<li><a href="<%=path%>/info/index.jsp">關於我們</a></li>


我在jsp文件中直接輸出<%=request.getContextPath() %>得到的是"/工程名"

也就是說採用 "<%=request.getContextPath() %>/js/jquery/jquery-1.11.3.js"的方式路徑應該是“/工程名/js/jquery/jquery-1.11.3.js”

所以訪問不到

下面來測試html的引入方式:

在html中同樣引入五個檔案:

檔案位置如之前所示,下面把html程式碼粘過來:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery test</title>
	<link rel="stylesheet" type="text/css" href="../css/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/test1.css">
	<script type="text/javascript" src="../js/jquery/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="../js/jquery/jquery.easyui.min.js"></script>
</head>
<body>
	<div class="AAA" style="al">hello world!</div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		alert("OK,JQuery is run.");
	});
</script>
</html>
效果如下:


*************************************************************************************


**********************************************************************************

表示該方式 引入檔案成功。

在html檔案中引入檔案是相對路徑的方法

href="../css/test1.css"
"../"表示返回當前檔案所在位置上一級,所以在html檔案上一級,來到了WebContent目錄下css/test1.css成功引用到了該檔案。