如何在 Spring-MVC Eclipse 项目中包含 jQuery 库

How to include the jQuery library in a Spring-MVC Eclipse project

提问by Samo

Good day,

再会，

I have searched far and wide but all I can find is information about how to add various plugins to Eclipse. I don't want a plugin. I want my stinkin' jQuery!

我进行了广泛的搜索，但我能找到的只是有关如何将各种插件添加到 Eclipse 的信息。我不要插件。我想要我的臭 jQuery！

Some things I've tried:

我尝试过的一些事情：

I download jQuery and put it in my WebContent\WEB-INF\js folder. Then in my WebContent\WEB-INF\jsps\company.jsp file, I have a script tag:

我下载了 jQuery 并将其放在我的 WebContent\WEB-INF\js 文件夹中。然后在我的 WebContent\WEB-INF\jsps\company.jsp 文件中，我有一个脚本标签：

<script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>

But no dice. So on to the next attempt.

但是没有骰子。所以继续下一次尝试。

Window -> Preferences -> JavaScript -> Include Path -> User Libraries -> New...

窗口 -> 首选项 -> JavaScript -> 包含路径 -> 用户库 -> 新建...

Here I added my jQuery library and referened my file correctly. I can see my jQuery library in JavaScript Resources. It looks just like I'd expect it. But still, my jQuery script is not included in my page.

在这里，我添加了我的 jQuery 库并正确引用了我的文件。我可以在 JavaScript 资源中看到我的 jQuery 库。看起来就像我期待的那样。但是，我的 jQuery 脚本仍然没有包含在我的页面中。

What am I missing here? Is this such a no-brainer that nobody bothers to properly document how to do this? If it's such a no-brainer, why can't I figure it out? I THOUGHT I had a brain...

我在这里缺少什么？这是一个没有人费心去正确记录如何做到这一点的轻而易举的事情吗？既然这么简单，我怎么就想不通呢？我以为我有脑子……

采纳答案by Samo

The advice to move my jquery library to such-and-such a location was correct, with a small exception. A new servlet is required to serve up static content files. If anyone else has this problem, something like this should fit the bill:

将我的 jquery 库移动到某个位置的建议是正确的，只有一个小例外。需要一个新的 servlet 来提供静态内容文件。如果其他人有这个问题，这样的事情应该符合要求：

  <servlet>
    <servlet-name>statCont</servlet-name>
    <servlet-class>
      org.apache.catalina.servlets.DefaultServlet
    </servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>statCont</servlet-name>
    <url-pattern>*.js</url-pattern>
  </servlet-mapping>

回答by GriffeyDog

I think you need to locate the file NOT under the WEB-INF directory, as anything there is not visible to the HTML resulting from your JSP. Try putting your js directory directly under WebContent and changing your reference in the tag accordingly.

我认为您需要找到不在 WEB-INF 目录下的文件，因为在您的 JSP 生成的 HTML 中看不到任何内容。尝试将您的 js 目录直接放在 WebContent 下，并相应地更改标记中的引用。

EDIT: In response to the comment you left under Jay's answer. How are you referencing the file in your script tag?

编辑：为了回应您在杰伊的回答下留下的评论。您如何在脚本标记中引用文件？

You will probably want something like:

你可能想要这样的东西：

<script type="text/javascript" src="/<web-context-root>/js/jquery-1.4.3.min.js"></script> 

where web-context-root is specific to your application and assuming you put your js directory directly under WebContent.

其中 web-context-root 特定于您的应用程序，并假设您将 js 目录直接放在 WebContent 下。

回答by DwB

Option 1

选项1

Include jquery.js in your project

在您的项目中包含 jquery.js

1. Get jQuery.
2. Put the jQuery.js file somewhere under the web root, but not under WEB-INF. Perhaps, create a directory named "js" at the same level as the WEB-INF folder in your project (for me, this is under the WebContext folder).
3. Reference the jquery.js file in your JSP page (example below).

1. 获取 jQuery。
2. 将 jQuery.js 文件放在 Web 根目录下的某个位置，但不要放在 WEB-INF 下。也许，在与项目中的 WEB-INF 文件夹相同级别创建一个名为“js”的目录（对我来说，这是在 WebContext 文件夹下）。
3. 在您的 JSP 页面中引用 jquery.js 文件（下面的示例）。

Reference jQuery.js within project

在项目中引用 jQuery.js

<script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>
or (to include your context path in the reference if you are using JSTL mapped to prefix "c")
<script type="text/javascript" src="<c:url value="/js/jquery-1.4.3.min.js">"></script>

<script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>
或（如果您使用映射到前缀“c”的 JSTL，则在参考中包含您的上下文路径）
<script type="text/javascript" src="<c:url value="/js/jquery-1.4.3.min.js">"></script>

Option 2

选项 2

1. Don't get jquery.js
2. Load jquery from google CDN. (see below)

1. 不要得到 jquery.js
2. 从谷歌 CDN 加载 jquery。（见下文）

Reference jQuery.js from Google CDN

从 Google CDN 引用 jQuery.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

回答by Jay Chandran

That is correct. You should move the 'js' folder above WEB-INF folder. Then the js file will get picked up by your JSP.

那是正确的。您应该将 'js' 文件夹移动到 WEB-INF 文件夹上方。然后 js 文件将被您的 JSP 获取。

回答by user1219387

You could try using a separate servlet (which I have actually not tried yet) to load up the jQuery.js as static content.

您可以尝试使用单独的 servlet（我实际上还没有尝试过）将 jQuery.js 作为静态内容加载。

What solved it for me, is putting the jQuery.js file in the /content folder with the rest of html pages, and referencing it relative to root directory for both jsp and html pages.

为我解决的问题是将 jQuery.js 文件与其余 html 页面一起放在 /content 文件夹中，并相对于 jsp 和 html 页面的根目录引用它。

回答by NiLInfinite

Why are your JSPs in WEB-INF? They are created in 'WebContent' folder. WEB-INF folder should not be included in the class path.

为什么您的 JSP 在 WEB-INF 中？它们是在“WebContent”文件夹中创建的。WEB-INF 文件夹不应包含在类路径中。

Don't put your work in WEB-INF folder.

不要将您的工作放在 WEB-INF 文件夹中。

回答by Anshul Sachdeva

you can also add dependencies of jquery in your pom.xml and include in the script source: <script type="text/javascript" src="webjars/jquery/2.1.4/jquery.js"></script>

您还可以在 pom.xml 中添加 jquery 的依赖项并包含在脚本源中： <script type="text/javascript" src="webjars/jquery/2.1.4/jquery.js"></script>