JavaScript 文件无法与 servlet 一起正常工作答案

【问题标题】：JavaScript file not working properly with servletJavaScript 文件无法与 servlet 一起正常工作
【发布时间】：2014-04-27 12:52:54
【问题描述】：

我正在 Tomcat 中处理一个项目，但我遇到了一个 JavaScript 文件问题。我正在尝试使用pickadate.js，当我将所有内容放入HTML文件时一切正常，但是当我编写一个读取html文件并将其打印到响应编写器的servlet时，日期选择器不起作用，我得到了在 Web 控制台中出现以下 JavaScript 错误：

10:37:53.100 SyntaxError: missing : in conditional expression picker.js:349
10:37:53.102 SyntaxError: missing ; before statement picker.date.js:293
10:37:53.106 TypeError: $(...).pickadate is not a function AdminBlackout:24

这是我在 servlet 中读取的 HTML 文件：

<!doctype html>
<html>
    <head>

        <meta charset="utf-8">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <link rel="stylesheet" href="pickadate.js-3.4.0/tests/dev/style.css">
        <link rel="stylesheet" href="pickadate.js-3.4.0/lib/themes/default.css">
        <link rel="stylesheet" href="pickadate.js-3.4.0/lib/themes/default.date.css">

        <script src="pickadate.js-3.4.0/lib/picker.js"></script>
        <script src="pickadate.js-3.4.0/lib/picker.date.js"></script>
        <script src="pickadate.js-3.4.0/lib/legacy.js"></script>

    </head> 

    <body> 
        <input class="datepicker" type="text">

        <script type="text/javascript">
            $('.datepicker').pickadate();
        </script>

    </body>

</html>

servlet 生成的源代码与上面完全相同。当我直接在浏览器中加载 html 文件时，一切正常，并且没有 JavaScript 错误。 pickadate.js-3.4.0 文件夹位于我的 webapp 的根目录中。如果有人对如何解决这个问题有任何想法，我将不胜感激。

更新：

web.xml：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">


  <servlet>
    <servlet-name>Admin</servlet-name>
    <servlet-class>Admin</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Admin</servlet-name>
    <url-pattern>/admin</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>AdvisorAddTimeslots</servlet-name>
    <servlet-class>AdvisorAddTimeslots</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AdvisorAddTimeslots</servlet-name>
    <url-pattern>/AdvisorAddTimeslots</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>AdvisorTimeslots</servlet-name>
    <servlet-class>AdvisorTimeslots</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AdvisorTimeslots</servlet-name>
    <url-pattern>/AdvisorTimeslots</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>AdvisorCalendar</servlet-name>
    <servlet-class>AdvisorCalendar</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AdvisorCalendar</servlet-name>
    <url-pattern>/AdvisorCalendar</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>AdvisorTimeslotDetails</servlet-name>
    <servlet-class>AdvisorTimeslotDetails</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AdvisorTimeslotDetails</servlet-name>
    <url-pattern>/AdvisorTimeslotDetails</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>Homepage</servlet-name>
    <servlet-class>Homepage</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Homepage</servlet-name>
    <url-pattern>/Homepage</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>StudentSearch</servlet-name>
    <servlet-class>StudentSearch</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>StudentSearch</servlet-name>
    <url-pattern>/StudentSearch</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>SaveTimeslots</servlet-name>
    <servlet-class>SaveTimeslots</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>SaveTimeslots</servlet-name>
    <url-pattern>/SaveTimeslots</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>Admin</servlet-name>
    <servlet-class>Admin</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Admin</servlet-name>
    <url-pattern>/Admin</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>AdminBlackout</servlet-name>
    <servlet-class>AdminBlackout</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AdminBlackout</servlet-name>
    <url-pattern>/AdminBlackout</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>ConfirmTimeslot</servlet-name>
    <servlet-class>ConfirmTimeslot</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>ConfirmTimeslot</servlet-name>
    <url-pattern>/ConfirmTimeslot</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>SaveBlackout</servlet-name>
    <servlet-class>SaveBlackout</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>SaveBlackout</servlet-name>
    <url-pattern>/SaveBlackout</url-pattern>
  </servlet-mapping>

</web-app>

文件结构：

-tomcat
  -webapps
    -SANDBOX
      -pickadate.js-3.4.0
      -test.html
      -web-inf

网址：http://team01.no-ip.biz:8080/SANDBOX/AdminBlackout

【问题讨论】：

我想让你展示两件事：你的 web.xml 和你的 WAR 内部文件结构（至少显示你的 pickadate 目录）。
哦，然后发布您向其发送请求的 URL，该 URL 返回了您问题中的 HTML。
检查您的网络控制台。 js 文件的 HTTP 请求是否以 200 OK 完成？
我所有的 js 和 css 文件都得到 304 未修改
您应该使用 Ctrl+F5 刷新页面以确保重新加载所有文件。据我了解这个问题，servlet 正在读取一个 html 文件并将其内容写入请求的输出流。如果 html 已存储为 ISO-8859-1 但 js 文件为 UTF-8 格式，则客户端可能未以正确格式接收文件。你能在响应头中检查编码吗？

标签： javascript html tomcat servlets

【解决方案1】：

这听起来像是编码问题：

Java 读取文件时，要考虑到它假定文件的编码是系统的默认编码。在 Windows 中，这意味着您使用的是 ISO-8859-1 的变体，而不是 UTF-8，这是浏览器的默认编码。 servlet 如何读取文件？请求使用的编码是什么？

【讨论】：

FileReader 在哪里发挥作用？
我正在使用 BufferedReader 读取文件，它使用的是 ISO-8859-1。关于如何解决这个问题的任何想法？
这是一个编码问题，但这是写入文件而不是读取文件的问题。我使用了response.setContentType("text/html; charset=UTF-8");，以便响应作者使用 utf-8 编写。现在一切正常。