Can't access CSS and JavaScript files in JSP

问题

I am developing a application in JSP/Servlet using MVC. In this application I want to load index.jsp as welcome page and this page retrieves the data from database. I did it. Now the problem is that when index.jsp page loads it fetches data from database but it shows it on browser as plain text and my CSS is not working for it.

I know that during translation phase JSP is converted into servlet and after processing it send output to browser so during that we have to write the relative path of the .css files. I tried almost tutorials and questions in Stack Overflow but its not working. I tried ${pageContext.request.contextPath} to retrieve context path but its not working.

In this application my target is showing news updates on index.jsp page. So I am fetching data and showing it on JSP. To achieve this first controller runs and it fetch data from Database using DAO class. Then DAO Class returns that data into list to controller and controller then put data into RequestDispatcher and send it to JSP. Now when I am running application I get data on browser but it shows just plane text data not showing CSS effects. while when I set index.jsp as welcome page and from it when I type URL pattern then it shows fine but currently my welcome page is not set to any page and url-pattern is / so all that i need is performed well but CSS effects are not applied to output so how can I solve this it?

Here I am posting Eclipse snap please give me suggestions.

Directory Structure :

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

Code of 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>

Code of servlet class:

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 {
    }
}

This is the code of index.jsp file:

<%@ 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">

回答1:

When you are running application then controller calls the .jsp and jsp is get converted to servlet during translation phase so try to add relative path using ${pageContext.request.contextPath} and once check the url pattern in web.xml and once left it blank and then try it may work.

回答2:

try this..

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

it's work for me..

回答3:

It is possible that your context path i.e. ${pageContext.request.contextPath} would be incorrect. Try printing this value on the jsp and see if it is correct.

Once you correct this, you should be able to have the css, js files properly loaded.

回答4:

Try to use the JSTL add this to your JSP page
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
and then use the url taglib like this

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

回答5:

Make sure you have no Servlet with the url-mapping "/*". That was the problem that was causing me a lot of headaches.

来源：https://stackoverflow.com/questions/20129121/cant-access-css-and-javascript-files-in-jsp

标签

java

jsp

servlets

model-view-controller