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定義的變量的值了。