当前位置：首页 > 后端开发 > 正文

jsp怎么引用javascript

admin
后端开发
2025-09-01
9

JSP 中引用 JavaScript，可将 JavaScript 代码写在 ` 标签内，放在 JSP 页面的或部分，也可通过外部 .

JSP（JavaServer Pages）中引用JavaScript是一种常见的需求，用于增强网页的交互性和用户体验，以下是详细的步骤和示例,帮助你理解如何在JSP页面中有效地引入和使用JavaScript。

直接在JSP中嵌入JavaScript代码

这是最直接的方法,适用于简单的脚本或少量的JavaScript代码。

示例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8">JSP与JavaScript示例</title> <script type="text/javascript"> // 这是内嵌的JavaScript代码 function showAlert() { alert("欢迎来到JSP页面！"); } </script> </head> <body onload="showAlert()"> <h1>这是一个JSP页面</h1> </body> </html>

说明：

使用<script>标签将JavaScript代码嵌入到<head>部分。
type属性指定脚本类型为text/javascript。
在<body>标签中使用onload事件调用JavaScript函数,当页面加载完成后弹出提示框。

引用外部JavaScript文件

将JavaScript代码分离到独立的文件中,可以提高代码的可维护性和重用性。

步骤：

创建JavaScript文件：script.js。
在JSP中引用该文件。

示例：

script.js

// script.js function showAlert() { alert("欢迎来到JSP页面！"); } function changeColor(color) { document.body.style.backgroundColor = color; }

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8">引用外部JavaScript的JSP示例</title> <script src="script.js" type="text/javascript"></script> </head> <body onload="showAlert()"> <h1>这是一个JSP页面</h1> <button onclick="changeColor('lightblue')">改变背景颜色</button> </body> </html>

说明：

jsp怎么引用javascript 第1张

使用<script src="script.js"></script>标签引入外部JavaScript文件。
确保script.js文件路径正确，通常放在与JSP相同的目录下,或者根据项目结构放置在合适的位置。
通过按钮的onclick事件调用外部JavaScript函数,实现页面交互。

动态生成JavaScript内容

有时候需要在JSP中根据服务器端的数据动态生成JavaScript代码,这可以通过JSP表达式或脚本let来实现。

示例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String userName = "张三"; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8">动态生成JavaScript的JSP示例</title> <script type="text/javascript"> // 使用JSP表达式将变量传递到JavaScript var user = '<%= userName %>'; function greetUser() { alert("欢迎，" + user + "！"); } </script> </head> <body onload="greetUser()"> <h1>个性化欢迎页面</h1> </body> </html>

说明：

使用<%= userName %>将JSP中的Java变量userName的值传递给JavaScript变量user。
在JavaScript函数中使用该变量,实现个性化的欢迎提示。

使用JSTL或EL表达式与JavaScript结合

在复杂的应用中，可能需要结合JSTL（JSP Standard Tag Library）或EL（Expression Language）来处理数据并与JavaScript交互。

示例：

jsp怎么引用javascript 第2张

jsp怎么引用javascript 第3张

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8">JSTL与JavaScript结合示例</title> <script type="text/javascript"> // 从JSP传递列表数据到JavaScript数组 var items = <%= (new org.json.JSONArray(request.getAttribute("itemList").toString())).toString() %>; function displayItems() { var text = ""; for (var i = 0; i < items.length; i++) { text += items[i] + "<br>"; } document.getElementById("itemList").innerHTML = text; } </script> </head> <body onload="displayItems()"> <h1>商品列表</h1> <div id="itemList"></div> </body> </html>

说明：