jsp页面公共js代码抽取（html抽取公共代码）

本文目录一览：

• 1、怎么在 js 代码中使用 jsp 标签或 Java 代码
• 2、jsp 如何调用js
• 3、JSP的页面里面有JS的代码怎么调试
• 4、在jsp页面中java代码获取js里面var变量的值
• 5、jsp调用js的变量

怎么在 js 代码中使用 jsp 标签或 Java 代码

JSP 标签还是很方便的，比如 Struts、Spring 等提供给我们的 JSP 标签，可以用它们来获取变量或进行一些计算。比如

struts2 的 s:url value=”/admin/unmi.action”/

会为我们自动在前面附加上应用上下文，如实际会生成

/testsite/admin/unmi.action。还有更多更方便的标签使用，比如用标签获取到 session 或请求中的数据作为 js

的变量等。

引申此话题的，其实不光是在 JS 中使用 JSP 标签，可用 JSP 标签的地方当然可以直接写 Java 代码，即 ScriptLet 代码。

如果是在 JSP 中内嵌的 JS 代码，那当然好办，JSP 文件中能用什么标签，js 代码中也能随便用，因为 JSP 标签会先在服务端解释生成相应的 JS 代码，丢给客户端执行。

那如果是在单独的 JS 文件中想要使用 JSP 标签，该如何办呢？还直接像 JSP 那样使用标签的话，对不起 JS

文件中给你原样显示出来，因为 JS 文件不被服务器端解释。其实到现在问题也基本有了答案，要解决的问题就是要让服务端去解释你的标签，有两种方案。

一. js 文件命名为 JSP 文件，写 js 内容，其中用标签，然后用 script src=”/scripts/tags.js.jsp”/script 把该 JSP 文件当作 JS 文件那样引入。

因为 JSP 文件会被服务端解释，所以把该 JSP 文件当作 JS 文件来写，JS 文件里应该是什么，你的 JSP

文件也应该输出什么，只是里面可以放标签，要知道它将会输出什么。用 script 来引入的话，页面顺理的把它认为是一段外部 JS

代码。

例如文件 /scripts/tags.js.jsp 中的内容是：

%@ taglib prefix=”s” uri=”/struts-tags” %

var currentUser = ‘s:property value=”#session.userName” /’;

alert(“currentUser: ” + currentUser);

那么在某个网页中用 script src=”/scripts/tags.js.jsp”/script 引入该文件时，上面的 JS 代码将会弹出当前 session 中的用户名来。

上面代码执行都没问题的，但是你直接浏览 你看到的是挤在一团的代码，不像查看普通 JS 文件那样有清晰的换行和退格，原因是浏览器默认只认扩展名，它的 mime 类型，也就是 Content-Type text/html。要让它更像是个 JS 文件那得给它加上响应类型的设置，在 tags.js.jsp 文件第一行加上：

%response.setContentType(“text/javascript;charset=utf-8”);%

这时候对于浏览器来说，无论从哪个方向来看它都是个切切实实的 JS 文件，只扩展名不同罢了。

上面的方法实际表现是没什么问题的，不过还有两点不那么完美，第一，文件名看起来像 JSP 文件，有些令人误解；第二，在 IDE 中打开该 JSP 文件，没法应用 JS 的语法加亮，给编辑带来不少麻烦。下面的方法充分解决前面两个问题。

二. 直接在 JS 文件中使用 JSP 标签

讲下原理，不是说应用服务器端默认不解释 JS 中的标签吗，那我们可以让个别的 JS 文件同样受到服务器端的关注，不是把 js 原文直接抛给客户端，而是先解释其中的标签，或是其中的 java 代码。

Tomcat 这种应用服务器我们通常也会称它为 Servlet 容器，因为它执行的是 Servlet，JSP 自然也是 Servlet。在 %TOMCAT_HOME%/conf/web.xml 中我们可以看到实际处理 JSP 文件的 Servlet 是：

servlet

servlet-namejsp/servlet-name

servlet-classorg.apache.jasper.servlet.JspServlet/servlet-class

init-param

param-namefork/param-name

param-valuefalse/param-value

/init-param

init-param

param-namexpoweredBy/param-name

param-valuefalse/param-value

/init-param

load-on-startup3/load-on-startup

/servlet

servlet-mapping

servlet-namejsp/servlet-name

url-pattern*.jsp/url-pattern

/servlet-mapping

servlet-mapping

servlet-namejsp/servlet-name

url-pattern*.jspx/url-pattern

/servlet-mapping

org.apache.jasper.servlet.JspServlet，所以我们可以在自己应用的 web.xml

文件中配置某些特别的文件同样由 JspServlet 来处理。比如要特别处理 /scripts/tags.js 文件，在应用的 web.xml

中只要加上：

servlet-mapping

servlet-namejsp/servlet-name

url-pattern/scripts/tags.js/url-pattern

/servlet-mapping

注意，上面是 Tomcat 6.x 或更早版中应用的 web.xml 的写法，后来 servlet-mapping 中

url-pattern 可同时写多个，加上 Tomcat 7 自身的古怪，这一设置会覆盖掉原 jsp 的设置，所以在 Tomcat 7

中应用必须配置成如下（也就是必须默认项也带上，然而列出自己的希望被当作 jsp 的 js 文件，可多个，不把 *.jsp/*.jspx

带上的话，你原有的 jsp 会当作文本文件直接展示出源码来）：

servlet-mapping

servlet-namejsp/servlet-name

url-pattern*.jsp/url-pattern

url-pattern*.jspx/url-pattern

url-pattern/scripts/tags.js/url-pattern

/servlet-mapping

我们配置 /scripts/tags.js 要由 JspServlet 来处理，不会影响到现有的其他任何 JS 文件。

那现在的 /scripts/tags.js 可不是普通的 js 文件了，它可是具有放置 JSP 标签和写 Java

代码的超能力了，因为其中的 JSP 标签和 Java 代码首先会经由服务端来解释。它集 JS 和 JSP 于一身，另外也别忘了给该 JS

文件前面加上代码：

%response.setContentType(“text/javascript;charset=utf-8”);%

不然单独浏览它也就只是不那么好看。

无疑，这是目前我能想的最完美的一种方式了，且兼容于其他的 Servlet 容器，也不用改动公共部分的东西。/scripts/tags.js 在 JS IDE 中打开也漂亮多了，因为它就是个 JS 文件，只是被赋予了 JSP 的功能。

jsp 如何调用js

猪哥解答:

1、如果是想通过JSP中的java代码调用js某函数，假定函数名为DemoFunction，那么就在jsp中这样写%out.println(“scriptDemoFunction();/script”);%

2、如果不是想通过java代码调用，那么HTML页面怎么调用的就是怎么调用。

JSP的页面里面有JS的代码怎么调试

直接运行是断点不到的。

你可以在jsp里面的js加个错误的语句，比如1/0。然后运行，js就会报错，你在浏览器的调试模式就是可以看到对应的js错误的哪个代码，然后你就在那段代码里面加断点，最后在把错误的代码去掉，断点就加进去了，就可以调式了

在jsp页面中java代码获取js里面var变量的值

function deleteM(id){

//直接删掉 数据库假删除

/* alert(id);

$ */(“#div”+id).remove();

$.ajax({

url:”${pageContext.request.contextPath}/servlet/MenuServlet?method=delete”,

data:”id=”+id,

success:function(data){

$(“#div”+id).remove();

}

});

}

body

This is menu selectAll JSP page. br

jsp:include page=”/servlet/MenuServlet?method=findAll”/jsp:include

p/p

div class=”table-1″

div class=”tr-1″

div class=”td-1″序号/div

div class=”td-1″标题/div

div class=”td-1″连接地址/div

div class=”td-1″排序/div

div class=”td-1″录入时间/div

div class=”td-1″操作/div

div class=”clear”/div

/div

/div

c:forEach items=”${requestScope.menus }” var=”a” varStatus=”stat”

div class=”table-1″

div class=”tr-1″ id=”div${a.id}”

div class=”td-1″${stat.count }/div

div class=”td-1″${a.title }/div

div class=”td-1″${a.url}/div

div class=”td-1″${a.sort }/div

div class=”td-1″ id=”timer”${a.inputTime }/div

div class=”td-1″

a href=”javascript:void(0)” onclick=”javascript:deleteM(${a.id})” return false; id=”deleteM${a.id}”删除/a

a href=”javascript:void(0)” onclick=”javascript:updateM(${a.id})” return false; id=”updateM${a.id}”修改/a

a style=”display: none;” href=”javascript:void(0)” onclick=”javascript:submitM(${a.id})” return false;id=”okM${a.id}”确定/a

a style=”display: none;” href=”javascript:void(0)” onclick=”javascript:cancalM(${a.id})” return false;id=”cancalM{a.id}”取消/a

/div

div class=”clear”/div

/div

/div

/c:forEach

p/p

p/p

div id=”table-1″

c:forEach begin=”1″ end=”${requestScope.pager.pageCount }” var=”i”

c:if test=”${i eq requestScope.pager.pageNo }” var=”isPageNo”

span style=”color:black”[${i }]/span

/c:if

c:if test=”${not isPageNo }”

a href=”${pageContext.request.contextPath }/manage/menu/selectAll.jsp?pageNo=${i}”[${i }]/a

/c:if

/c:forEach

/div

p/p

p/p

div id=”table-1″

div class=”tr-1″

div class=”td-2″ a href=”javascript:void(0)” onclick=”javascript:insertM()”添加菜单项/a/div

div class=”clear”/div

/div

/div

div id=”table-1″

div class=”tr-1″

div class=”td-2″ id=titleInsert标题:input required //div

div class=”td-2″ id=”urlsInsert”连接地址:input required //div

div class=”td-2″ id=”sortInsert”排序:input required onBlur=”checkSort()”//div

div class=”td-2″ a href=”#” onclick=”javascript:insertM();return false;”添加/a

a href=”javascript:void(0)” onclick=”javascript:cancalM2()”取消/a/div

div class=”clear”/div

/div

/div

p/p

p/p

p/p

p/p

div id=”table-1″

div class=”tr-1″

div class=”td-2″ a href=”javascript:void(0)” onclick=”javascript:selectM()”我好想找点什么/a/div

div class=”clear”/div

/div

/div

div id=”table-1″

div class=”tr-1″

div class=”td-2″ select id=”sss” onChange=”selectWay()”

option value=”s1″ 按录入时间查找:/option

option value=”s2″ 按ID查找:/option

option value=”s3″按排序查找:/option

/select

/div

div class=”td-2″ id=”selectMByTime”

开始时间:input type=”datetime-local”/结束时间:input type=”datetime-local”/

a href=”javascript:void(0)” onclick=”javascript:submitM(${a.inputTime})”开找/a

a href=”javascript:void(0)” onclick=”javascript:cancalC(${a.inputTime})”取消/a

/div

div class=”td-2″ style=”display: none;” id=”selectMById”

ID:input type=”text” /

a href=”javascript:void(0)” onclick=”javascript:submitM(${a.id})”开找/a

a href=”javascript:void(0)” onclick=”javascript:cancalC(${a.id})”取消/a

/div

div class=”td-2″ style=”display: none;” id=”selectMBySort”

降序：input type=”radio” name=”sort” id=”up” checked /倒序：input type=”radio” name=”sort” id=”desc” /

a href=”javascript:void(0)” onclick=”javascript:submitM(${a.sort})”开找/a

a href=”javascript:void(0)” onclick=”javascript:cancalC(${a.sort})”取消/a

/div

div class=”td-2″ style=”display: none;” /div

/div

/div

/body

没有js的头`他说字数超限了

jsp调用js的变量

1、首先在jsp页面上，定义二个变量。

2、然后在页面下方，添加一个js脚本块。

3、在脚本块里定义一个js变量，然后使用jsp的输出标记，输出jsp的变量s，赋值给js变量。

4、在页面里有一个js脚本方法，假设这个方法要用到jsp的变量。

5、可以直接使用js的那个变量就行了，因为这个变量就是使用jsp输出标记赋值jsp的变量值的。

6、最后运行jsp页面，在浏览器的控制台，可以看到输出的值就是jsp定义的变量的值了。