Question

我正在尝试使用Jquery的.load()方法，使用Jquery将html代码加载到另一个html文件中。

我尝试使用绝对路径访问文件，但仍然遇到相同的错误。我还尝试了导航到绝对路径和文件，并且该文件将在浏览器中正常打开，因此它似乎不是访问问题。我还映射到了最新版本的jQuery，而不是我的本地版本。

无法确定错误响应，这使得该问题难以解决：

更新代码：通过用户推荐对代码进行了更改。

HTML主页面

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#test").load("/menu.html", function(response, status) {

        if(status === 'error') {
            alert("Failed to load menu.html");
        }
        else {
            alert("Success!");
        }    
    });
});
</script> 
</head>

</head>

<body>
    <div id="test"></div> 
</body>

加载HTML页面



                <ul>
                   <li><a href="index.html">Home</a></li>
                    <li>
                        <a href="article.html">Article</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li><a href="article.html">Scrollspy</a></li>
                                <li><a href="article-narrow.html">Narrow</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="faq.html">Faq</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="components.html">Components</a></li>
                </ul>

如果有人输入任何内容或遇到类似错误，请告诉我。

Answer 1

看起来有些地方可能会引起问题-请考虑对代码进行以下调整：

正在加载HTML页面

<!-- <div id="menu"> Remove div with menu id -->

    <ul>    <!-- Add opening ul tag -->
        <li><a href="index.html">Home</a></li>
        <li>
            <a href="article.html">Article</a>
            <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li><a href="article.html">Scrollspy</a></li>
                    <li><a href="article-narrow.html">Narrow</a></li>
                </ul>
            </div>
        </li>
        <li><a href="faq.html">Faq</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="components.html">Components</a></li>
    </ul>


<!-- </div> Remove extra div -->

主HTML页面

在HTML主页上的脚本中，请考虑扩展load()回调以在请求失败时显示错误：

jQuery(document).ready(function(){
    jQuery("#menu").load("menu.html", function(response, status) {
        /* Optional, but consider revising this function to alert on error */
        if(status === 'error') {
            alert("Failed to load menu.html");
        }
        else {
            alert("Success!");
        }    
    });
});

如果load()回调期间确实发生错误，则应检查以确保menu.html在指定的（相对）位置可访问。

在大多数情况下，这可以直接在浏览器中完成，方法是导航到该HTML文件的URL并验证HTML响应是否符合预期。

如果您的menu.html文件位于服务器的根目录（即yourserver.com/menu.html），则可以考虑通过添加正斜杠前缀来修改脚本以通过绝对路径获取menu.htm /menu.html：

jQuery("#menu").load("/menu.html", function(response, status) {
    ....
});

更新

或者，您可能要考虑基于ajax()方法的这种方法：

jQuery(function() {
    jQuery.ajax({
        url: '/menu.html',
        dataType: 'html',
        success: function(data) {
            $('#menu').html(data);
        },
        error: function(xhr, error){
            alert('error. see console for details');
            console.error(error);
        }
    });
});

更新

还要确保您的网站/应用程序的内容是通过服务器而不是文件系统提供的。可以通过多种方式设置服务器来实现这一目标-如果您使用的是基于chrome的浏览器，则使用此chrome扩展程序在开发计算机上设置本地服务器的简单方法是：

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

安装后，您可以配置扩展以通过本地托管的服务器提供开发计算机上目录中的内容。届时，您将通过http://localhost:[SOME_PORT]/而非file:///C:/data/访问您的网站。通过localhost访问您的网站应该可以为您解决问题。

jQuery加载功能未加载文件

1 个答案:

更新

更新