个人中心
gpt4 book ai didi

javascript - JavaScript 和 CSS 未加载

转载 作者：行者123 更新时间：2023-11-28 04:30:16 27 4
gpt4 key购买 nike

当我们从主页导航时，Java 脚本和 CSS 未加载。

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"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

    <servlet-mapping>
        <servlet-name>solutionpages</servlet-name>
        <url-pattern>/solution/*</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>solutionpages</servlet-name>
        <jsp-file>/solution.html</jsp-file>
    </servlet>
</web-app>

index.html

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>



<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>

<body ng-app="puzzle">

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PUZZLERAYSE</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->

        <!-- /.row -->

        <!-- Project One -->
        <div ng-controller="PuzzleList">

            <div ng-repeat="puzzle in puzzlesList">
                <div class="row">
                    <div class="col-md-7">
                        <h4>
                            <a href="{{puzzle.puzzleURL}}">{{puzzle.heading}}</a>
                        </h4>
                    </div>
                    <div class="col-md-5"></div>
                </div>

                <div class="row">
                    <div class="col-md-7">{{puzzle.question}}</div>
                    <div class="col-md-5">
                        <!-- <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Laudantium veniam exercitationem expedita laborum at voluptate.
                        Labore, voluptates totam at aut nemo deserunt rem magni pariatur
                        quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span
                        class="glyphicon glyphicon-chevron-right"></span></a> -->
                    </div>
                </div>
                <hr>
            </div>
        </div>
        <!-- /.row -->

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Puzzlerayse 2017</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>

    <script src="js/angular.min.js"></script>


    <script>
    angular.module('puzzle', [])
    .controller('PuzzleList', function($scope, $http) {
        $http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
            then(function(response) {
                $scope.puzzlesList = response.data;
            });
    });
    </script>
</body>
</html>

解决方案.html

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>



<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>

<body ng-app="puzzle">

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PUZZLERAYSE_SOLUTION</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->

        <!-- /.row -->

        <!-- Project One -->
        <div ng-controller="PuzzleList">

            <div ng-repeat="puzzle in puzzlesList">
                <div class="row">
                    <div class="col-md-7">
                        <h4>
                            <a href="{{puzzle.puzzleURL}}">{{puzzle.heading}}</a>
                        </h4>
                    </div>
                    <div class="col-md-5"></div>
                </div>

                <div class="row">
                    <div class="col-md-7">{{puzzle.question}}</div>
                    <div class="col-md-5">
                        <!-- <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Laudantium veniam exercitationem expedita laborum at voluptate.
                        Labore, voluptates totam at aut nemo deserunt rem magni pariatur
                        quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span
                        class="glyphicon glyphicon-chevron-right"></span></a> -->
                    </div>
                </div>
                <hr>
            </div>
        </div>
        <!-- /.row -->

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Puzzlerayse 2017</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>

    <script src="js/angular.min.js"></script>


    <script>
    angular.module('puzzle', [])
    .controller('PuzzleList', function($scope, $http) {
        $http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
            then(function(response) {
                $scope.puzzlesList = response.data;
            });
    });
    </script>
</body>
</html>

我正在使用带有 Angular js 的 bootstrap，但是当我使用下面的 URL 登陆主页时，它工作正常。

http://localhost:8081/puzzleworld/

但是当我从主页导航并使用如下所示的 URL 

http://localhost:8081/puzzleworld/solution/xyz

CSS 和 Java 脚本未加载。请帮助我。

This is directory structure

注意:- 没有定义 Java Servlet，仅存在 html 文件。

使用 Chrome 调试器时出现以下错误

资源解释为样式表，但使用 MIME 类型 text/html 传输:“http://localhost:8081/puzzleworld/solution/css/bootstrap.css”

最佳答案

这与链接路径有关，所以看起来，如果一个页面正常工作而另一个页面不工作......

尝试改变这个；

  <link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">

对此；

<link href="/css/1-col-portfolio.css" rel="stylesheet" type="text/css">

关于javascript - JavaScript 和 CSS 未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44675688/

27 4 0
文章推荐： javascript - 苹果如何定义 "user action"？
文章推荐： javascript - 如何将变量和数据从PHP传递到JavaScript？
文章推荐： html - 动态生成图像？
文章推荐： css - 使元素缩小时左上/右上边框半径不变？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com