jsp文件引入js文件的方式（项目部署于web容器中）


在页面中引入javascript文件的方式是多种多样的，本文介绍两种。

  1. 通过<script>标签插入js文件

      通过这种方式引入的js，写对js文件和jsp文件的路径很重要。下面给出一个项目的路径结构，由此说明我是怎么在项目的jsp页面中引入js的。

在eclipse中新建一个web项目，目录结构如下：

jsp引入java类 jsp页面怎么引入js文件_javascript

可以看到，jsp页面和欲引入的js在不同的目录下。

                                                      以下是jsp页面关于引入js的代码。

一、在页面的最开始，获取项目的根路径。


<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    %>


 

举例来说，

path可能如下：myProject

basePath可能如下：http://localhost:8080/myProject/

二、在<head></head>中，插入下述代码：


base href="<%=basePath%>">


这句代码的作用是将整个页面的根路径设置为项目路径。

三、<script>的设置为：


<script type="text/javascript" src="plugins/audio/howler.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery.js"></script>


 

2.直接在<script type="text/javascript"></script>标签对中写入js代码

示例如下：


<script type="text/javascript">
$(document).ready(function() {
    alert("ok");
});
</script>


 


在写Jsp页面代码时，为了使整个工程的结构更加清晰，我们常喜欢讲js，css，images各自单独建文件夹，正所谓鱼和熊掌不可兼得也。便带来了一系列路径，编码统一问题。这就需要我们解决，而对于菜鸟。这些问题太恶心了，有时候一个上午都找不出哪有问题，等终于找出来后，真感觉他妈的 cheating father，下面我来说说我遇到的问题。

 

<script type="text/JavaScript" src="${pageContext.request.contextPath}/js/register.js" >

将js引入jsp中，完全没有效果。出现这种情况原因可能有三。、

一、js代码有误。

二、src路径写的不对。

三、可能你js是在dream里编写的吧，保存的编码与现在的jsp不同，现在的jsp改为UTF—8，

<script type="text/javascript" src="${pageContext.request.contextPath}/js/register.js"  charset="gb2312">




1）引入的js文件出错， 
检查方法：将Js的内容写在当前的页面的<script> </script>之间，看是否能够正常运行，如果不能，请核查代码 
2) 如果引入的代码在当前页面中能够正常运行，但当引入时不能正常运行，则有两种可能 
   A:引入Js的路径有问题 
   B:引入的Js的编码格式与当前页面不匹配； 
3)引入Js的路径问题 
   js的引入不外乎两种，相对路径与绝对路径 
  test.js  与index.jsp 放在同一文件夹下,比如: web应用/manage/下面 
  第一种情况 : 
  一般在学习时, 一个tomcat上都跑多个工程, 用工程名来区分 
因为我的的URL是 :http://localhost/工程名 /manage/index.jsp 
多了一个工程名,所以要加 <%=request.getContextPath() %> 
如下: 

<script src="<%=request.getContextPath() %> /manage/test.js"></script>



  第二种情况: 
  访问JSP文件时, 用相对路径引入JS,CSS文件是OK的 
  真实项目中,  一个tomcat上要是也跑了多个工程, 并用IP来区分 
  url 是这样的:  http://localhost/manage/index.jsp   注意这里,是直接访问JSP文件,不是    servlet,不是struts . 
test2.js  与index.jsp 放在同一文件夹下,下面用相对路径来引入 JS文件 是OK 的: 
<script src=test2.js></script> 

第三种情况:一个通过Action跳转之后到达的Jsp页面需要引入一个Js文件： 

  这种情况下，请使用绝对路径， 
  在第二情况的基础上, 我们访问的是 servlet 或是struts的action  , 再转发到 index.jsp 


url 是:  http://localhost/***.do或者  http://localhost/***.action 这里不是访问JSP文件了 

因此路径应该这么写： 
<script src="/manage/test.js"></script> 
test2.js  前面一定要有/manage/ 
或者：<script src="http://127.0.0.1/工程名/manage/test.js"></script> 这种方法推荐 

在引入js时，我们应该养成良好的习惯，请使用绝对路径，在开发时，能够大大的提高自己的开发效率。 


4）引入js的编码问题; 
   
   将两者的编码改为一致，一般我们可以修改JS文件编码使其与页面编码一致。 
第二种方式是使用script标记的charset属性来显式指明所引入js文件的编码。如<script src="xx.js" charset="gbk"></script> 这样无论页面是什么编码，都可以正常的访问这个JS中的内容。 
相比之下，第二种可能更方便一些，而且作为一种好的习惯，平时我们应该尽可能都写上charset属性。