Question

我有一个java网络应用程序，我一直在建设，以学习如何使用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将包含在我的所有网页上，我将在那里调用一些功能，它们将应用于所有这些网页。

如果我从myFunctions.js中取出jQuery并将其直接放入_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>

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

是否存在某些我缺失的映射？就像在js？

中声明web.xml文件夹的路径一样

Answer 1

原来答案是因为在我的IntelliJ Tomcat配置中，我给我的应用程序部署了一个/myApp的上下文路径，这让我搞砸了。

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

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

1 个答案: