HTML、SpringMVC 、JSP、Servlet中的相对路径和绝对路径完全手册
一、HTML 中使用 相对路径的方式
目录结构
/
index.html
/js/
chbk.js
/css/
style.css
/images/
bk1.jpg
、
bk2.jpg
1. style.css代码
@charset "utf-8"; /* CSS Document */ body{background-color:#ccc;} #content{background:url(../images/bk1.jpg) no-repeat;width:200px;height:200px;margin:auto;} #in{margin:auto;text-align:center;}
其中,
url(../images/bk.jpg)
路径是相对于style.css的。
2.chbk.js代码 (建议使用绝对路径)
//
JavaScript Document
function chbk(){
document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
}
其中,
url(images/bk2.jpg)
路径是相对于index.html的,而不是chbk.js的
url(../images/bk.jpg)
。
(建议使用绝对路径)
var path =
<%=request.getContextPath() %>;
url(path/images/bk2.jpg)
3、JS中的AJAX使用的路径,同上JS的使用方式
AJAX请求控制器的路径为:
$.ajax(url:
/SSM-Test2/handleservlet)
$.ajax(url:<% request.getContentPath()%>/user/a.jsp)
4.index.html代码 引用文件使用相对路径
使用了相对路径
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>引入Html中的css、js的路径问题
</
title
>
<
link
href
="css/style.css"
rel
="stylesheet"
type
="text/css"
/> //
<
script
src
="js/chbk.js"
type
="text/javascript"
></
script
>
</
head
>
<
body
>
<
div
id
="content"
>
</
div
>
<
div
id
="in"
>
<
input
class
="in"
type
="button"
value
="单击我更改背景"
onclick
="chbk()"
/>
</
div
>
</
body
>
</
html
>
建议:js中的路径引用应该采用绝对路径,可以通过定义一个全局变量如path来活动项目的真实路径(像jsp中就可以用
request.getSession().getServletContext().getRealPath("/")),然后在每个路径上加上path(
path+你的路径)从而取出路径错误的问题。
<
script
src
="
<%=request.getContextPath() %>/
js/chbk.js"
type
="text/javascript"
></
script
>
或者:
var path =
<%=request.getContextPath() %>;
<
script
src
="
path/
js/chbk.js"
type
="text/javascript"
></
script
>
4、HTML元素
(1)、属性中使用相对路径
<link href="one.css" rel="stylesheet" type="text/css">,
one.css:表示one.css和a.hmtl处于同一个目录
user/one.css:表示one.css处于a.html所在目录的子目录user中,即user是a.html在同一个目录 。
(2)、属性中使用绝对路径
<link href="/项目名/one.css" rel="stylesheet" type="text/css">,
(3)、属性中使用绝对路径(jsp 页面中才能使用
)
<link href="
<%=request.getContextPath() %>/one.css" rel="stylesheet" type="text/css">,
二、服务器端JAVA中使用
/webapps
/webapps/
SSM-Test
/webapps/SSM-Test/WEB-INF/views/index.jsp
JSP
forward:<%request.getRequestDispatcher("WEB-INF/views/index.jsp ")%>
redirect:<%response.sendRedirect("WEB-INF/views/index.jsp");%>
此路径就是相对于当前项目的:
2、
action中(使用同上) :
ACTION转发时,默认到容器TOMCAT:WEBAPPS下的项目中
SSM-Test中找此路径
所为使用方式为:
return /WEB-INF/views/index.jsp