无法在JSP中访问CSS和JavaScript文件

Question

我正在使用MVC在JSP / Servlet中开发应用程序。 在此应用程序中，我想将index.jsp加载为欢迎页面，并且此页面从数据库检索数据。 我做的。 现在的问题是，当index.jsp页面加载时，它会从数据库中获取数据，但会在浏览器中将其显示为纯文本格式，而我的CSS却无法正常工作。

我知道在翻译阶段，JSP会转换为servlet，并在处理后将输出发送到浏览器，因此在此期间，我们必须编写.css文件的相对路径。 我在Stack Overflow中尝试了几乎所有的教程和问题，但是没有用。 我尝试使用${pageContext.request.contextPath}来检索上下文路径，但是它不起作用。

在此应用程序中，我的目标是在index.jsp页面上显示新闻更新。 因此，我正在获取数据并将其显示在JSP上。 为了实现此第一个控制器运行，它使用DAO类从数据库中获取数据。 然后，DAO类将该数据返回到控制器和控制器的列表中，然后将数据放入RequestDispatcher并将其发送到JSP。 现在，当我运行应用程序时，我在浏览器上获取了数据，但是它仅显示平面文本数据，而没有CSS效果。 当我将index.jsp设置为欢迎页面，并在键入URL模式时从中将其显示为正常，但目前我的欢迎页面未设置为任何页面，并且url-pattern为/，所以我需要的全部执行得很好，但是CSS效果没有应用于输出，那么我该如何解决呢？

我在这里发布Eclipse snap，请给我建议。

目录结构：

-MVCTest
   -src
   -build
   -WebContent
      -css
        -style.css
        -demo.css
      -js
        -jquery.js

web.xml的代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>SwavaMVC</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <servlet-name>Visitor</servlet-name>
    <servlet-class>controller.Visitor</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Visitor</servlet-name>
    <url-pattern>/asdfD</url-pattern>
  </servlet-mapping>
</web-app>

Servlet类的代码：

package controller;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
//import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.NewsDAO;
import model.classes.News;

//@WebServlet("/Visitor")
public class Visitor extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public Visitor() {
        super();
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
        try {
            List<News> NewsList = NewsDAO.getNews();    
            request.setAttribute("NewsList", NewsList);
            request.getRequestDispatcher("index.jsp").forward(request, response);
        } 
        catch (SQLException e) {
            throw new ServletException("Cannot obtain news from DB", e);
        }
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

这是index.jsp文件的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>System</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="css/main_slider.css" type="text/css" media="screen" charset="utf-8" /> 

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>

<link href="css/demo.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollbox.js"></script>

<script language="javascript" type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>

</head>
<body id="home">

Answer 1

尝试这个..

<link href=${pageContext.request.contextPath}/css/style.css  rel="stylesheet" type="text/css" />

这对我有用。

Answer 2

您的上下文路径（即${pageContext.request.contextPath}可能不正确。 尝试在jsp上打印此值，看是否正确。

更正此错误后，您应该能够正确加载css，js文件。

Answer 3

当您运行应用程序时，控制器将调用.jsp并将jsp在转换阶段转换为servlet，因此请尝试使用${pageContext.request.contextPath}添加相对路径，并检查web.xml中的url模式，然后将其保留空白 ，然后尝试它可能会起作用。

Answer 4

尝试使用JSTL将其添加到您的JSP页面
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
然后像这样使用url taglib

<link href="<c:url value='/static/vendor/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">

Answer 5

确保没有带url映射“ / *”的Servlet。 那就是让我头疼的问题。

无法在JSP中访问CSS和JavaScript文件

问题描述

5 个解决方案

解决方案1
0 2013-11-21 18:33:34

解决方案2
0 2013-11-21 21:26:38

解决方案3
0 已采纳 2013-11-22 05:45:49

解决方案4
0 2019-01-27 21:07:30

解决方案5
0 2019-01-28 00:14:06

无法在JSP中访问CSS和JavaScript文件

问题描述

5 个解决方案

解决方案1 0 2013-11-21 18:33:34

解决方案2 0 2013-11-21 21:26:38

解决方案3 0 已采纳 2013-11-22 05:45:49

解决方案4 0 2019-01-27 21:07:30

解决方案5 0 2019-01-28 00:14:06

解决方案1
0 2013-11-21 18:33:34

解决方案2
0 2013-11-21 21:26:38

解决方案3
0 已采纳 2013-11-22 05:45:49

解决方案4
0 2019-01-27 21:07:30

解决方案5
0 2019-01-28 00:14:06