无法在JSP中访问CSS和JavaScript文件 [英] Can't access CSS and JavaScript files in JSP

问题描述

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

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.

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

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.

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

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?

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

Here I am posting Eclipse snap please give me suggestions.

目录结构:

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

web.xml的代码

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>

servlet类的代码:

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

这是index.jsp文件的代码:

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

推荐答案

在运行应用程序时，控制器将调用.jsp，并且在翻译阶段将jsp转换为servlet，因此请尝试使用${pageContext.request.contextPath}添加相对路径 并一次检查web.xml中的网址格式，并将其留空，然后尝试使用它.

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.

这篇关于无法在JSP中访问CSS和JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！