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

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

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

在eclipse中新建一个web项目,目录结构如下:

可以看到,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文件的方式(项目部署于web容器中)的更多相关文章

  1. Vue文件 引入.js文件 的组件

    Vue.component('remote-script', { render: function (createElement) { var self = this; return createEl ...

  2. 将spring boot项目部署到tomcat容器中

    一. 我这里用的环境 tomcat: tomcat 8 jdk: jdk 7 spring boot 版本: 1.5 二. 将创建好的spring boot项目做如下修改 2.1. 修改打包形式 在p ...

  3. 把spring-boot项目部署到tomcat容器中

    http://blog.csdn.net/javahighness/article/details/52515226

  4. jsp引入js文件

    转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script& ...

  5. 用maven创建项目引入js文件位置

    用maven创建项目引入js文件位置 截图如下:

  6. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  7. jQuery之JSP加载JS文件不起作用的有效解决方法

    JSP加载JS文件不起作用的有效解决方法 作者: 字体:[增加 减小] 类型:转载 时间:2014-04-08 jsp导入jquery文件,老是不起作用,原因在于其不能访问/WEB-INF/目录下的文 ...

  8. 1.在html中引入js文件和Jquery框架

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

随机推荐

  1. 关于ddpush推动实现抖动视频的使用

    /**   //开机之后打开服务  开机成功打开服务ddpushService**/ <!-- 开机广播 --> <receiver android:name="com.r ...

  2. rabbitmq 学习足迹

    http://www.cnblogs.com/me-sa/archive/2012/10/20/RabbitMQ_VHost_Exchanges_queues_bindings_and_Channel ...

  3. Python自动化 【第十一篇】:Python进阶-RabbitMQ队列/Memcached/Redis

     本节内容: RabbitMQ队列 Memcached Redis 1.  RabbitMQ 安装 http://www.rabbitmq.com/install-standalone-mac.htm ...

  4. xml对象的序列化和反序列化

    对象序列化: /// <summary>        /// 将一个对象序列化为XML字符串        /// </summary>        /// <par ...

  5. MySQL追踪优化器小试

    首先看一下MySQL追踪优化器的典型用法: 打开:SET optimizer_trace="enabled=on"; 查询优化器的信息:SELECT * FROM INFORMAT ...

  6. Badboy使用数据源Excel进行脚本参数化

    1.首先新建一个Excel,这里示例我写得非常简单,由两由数据组成,第一行为表头.见下图: 2.录制脚本,见上一篇,录制一个非常简单的搜狗查询 3.添加数据源,在Tools面板中找到Data Sour ...

  7. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  8. fiddler抓取Android 真机app数据包

    fiddler功能强大 不仅能抓pc上的请求还能抓取手机上的请求.下面以fiddler4 +android手机为例介绍一下 手机抓包. 官网下载fiddler后下一步下一步安装成功. 首先是fiddl ...

  9. C#中Invoke 和 BeginInvoke 的区别

    Control.Invoke 方法 (Delegate) :在拥有此控件的基础窗口句柄的线程上执行指定的委托. Control.BeginInvoke 方法 (Delegate) :在创建控件的基础句 ...

  10. nodejs学习笔记(一)

    终于开始学NodeJs了 说说遇到的问题吧 1.安装express npm install -g express(按道理说,这个全局安装是没问题的,但他就是出问题了) 解决方案: 来源:http:// ...