无法从 .jsp 页面调用另一个文件中的 jQuery 函数答案

【问题标题】：Unable to call jQuery function in another file from .jsp page无法从 .jsp 页面调用另一个文件中的 jQuery 函数
【发布时间】：2017-06-01 17:03:57
【问题描述】：

我正在构建一个 java web 应用程序来学习如何使用 servlet 和 jsp。

我试图将一些 jQuery 函数放入一个 .js 文件中，并将该文件包含在我的 jsp 页面中并调用这些函数，但我无法让它工作。

我正在使用的文件：

web > js > myFunctions.js
web > WEB-INF > views > _header.jsp
web > WEB-INF > views > homeview.jsp

myFunction.js的内容：

function hideButtons(userSession) {
    alert("hello");

// HIDE BUTTONS WHEN NO USER IS LOGGED IN
    if (userSession === "") {
        $('#logoutBtn').hide();
        $('#productBtn').hide();
        $('#acctBtn').hide();
    }

// HIDE BUTTONS WHEN USER IS LOGGED IN
    if (userSession !== "") {
        $('#loginBtn').hide();
        $('#loginForm').hide();
    }
}

_header.jsp的内容：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="../../js/myFunctions.js"></script>

<div style="background: #E0E0E0; height: 55px; padding: 5px;">
     
    <div style="text-align: center;">

        <div id="homeBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/">Home</a>
        </div>
        <div id="productBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/productList">Product List</a>
        </div>
        <div id="acctBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/userInfo">My Account</a>
        </div>
        <div id="logoutBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/logout">Logout</a>
        </div>

    </div>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        hideButtons('${loggedInUser}');

    });

</script>

homeView.jsp的内容：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title> Home Page </title>
    </head>

    <body>
        <jsp:include page="_header.jsp"></jsp:include>

        <div style="text-align: center">
            <h3> Home Page </h3>
            Welcome to the Home Page of my sample java web application.
        </div>

        <div>
            <b>It includes the following functions:</b>
            <ul>
                <li>Login</li>
                <li>Storing user information in cookies</li>
                <li>Product List</li>
                <li>Create Product</li>
                <li>Edit Product</li>
                <li>Delete Product</li>
            </ul>
        </div>

        <div id="loginForm">
            <hr>
            <jsp:include page="_login.jsp"></jsp:include>
        </div>

        <jsp:include page="_footer.jsp"></jsp:include>
    </body>
</html>

我的想法是，由于_header.jsp 将包含在我的所有网页中，我将在那里调用一些函数并将它们应用于所有这些网页。

如果我将 jQuery 从 myFunctions.js 中取出并直接放入 _header.jsp 中，一切都会像我计划的那样工作。但由于某种原因，我无法调用外部 .js 文件中的函数。

我做错了什么或遗漏了什么？

更新

原来我的 .js 资源路径有问题。我给了它

<script type="text/javascript" src="/../../js/myFunctions.js"></script>

_header.jsp 页面在WEB-INF -> views 中，而我的js 文件夹在WEB-INF 之外，所以我认为告诉上两个目录可以找到它。

猜后说

<script type="text/javascript" src="/myApp/js/myFunctions.js"></script>

它找到了路径并正确加载了资源。但我仍然不确定为什么我的第一种方法是不正确的并且没有工作。我以前在应用程序中看到过这种方式。

我是否缺少某种映射？就像在web.xml 中声明js 文件夹的路径一样？

【问题讨论】：

您确定 myFunctions.js 文件已加载。签入浏览器网络
@Dinesh 如果没有加载，除了将它包含在带有<script> 标签的 .jsp 文件中之外，我将如何加载它？
这是加载外部 js 文件的唯一选项。是否签入网络呼叫？
@Dinesh 我使用 Chrome 开发工具检查了该页面，发现 myFunctions.js 无法加载。它说the server responded with a status of 404 (Not Found)。所以不知何故我的 Tomcat 服务器没有加载文件？
只需将此 js 文件加载到另一个 brouser 选项卡中，您可以在其中看到 js 页面代码。如果这个 js 文件加载成功，那么您可以将该链接添加到您的 .jsp 页面，这应该可以正常工作。

标签： javascript java jquery jsp servlets

【解决方案1】：

原来答案是因为在 IntelliJ 的 Tomcat 配置中，我为我的应用程序部署提供了 /myApp 的上下文路径，这让我很困惑。

删除后我可以说/../../js/myFunctions.js，它正确地找到了文件。

【讨论】：