在HTML页面中使用jQuery包含HTML页面

问题描述：

我在网页中包含一个名为test.html的HTML页面。如下图所示：在HTML页面中使用jQuery包含HTML页面

<head> 
    <meta charset="utf-8"> 
    <title>load demo</title> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<b>Content I want to Include is here: </b> 
<div id="success"></div> 


<script> 
$("#success").load("test.html", function(response, status, xhr) { 
    if (status == "error") { 
    var msg = "Sorry but there was an error: "; 
    $("#success").html(msg + xhr.status + " " + xhr.statusText); 
    } 
}); 
</script> 

</body> 
</html>

我得到一个错误阅读：

Sorry but there was an error: 0 NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file://machd/.../HTML/test.html'.

这个错误是什么意思？以及如何最好地解决它？

这是否[较早前的问题（http://stackoverflow.com/问题/ 28453213 /执行失败 - 发送xmlhttprequest）帮助？ –

你需要一个服务器来使ajax工作。尝试xampp或类似的解决方案，如果你还没有一个 – monxas

本地文件（'file：// ...'）往往不适用于xhr应用程序，请尝试本地开发服务器。 – swornabsent

答

我同意上面的swornabsent和monxas。

此代码在上传时无误地运行，并且在服务器上查看页面。

答

也许你可以试试：

给的绝对路径的test.html作为参数，调试

答

它通过文件允许Ajax请求的唯一浏览器：//协议是旧的IE浏览器和由于安全问题而被删除。您的代码可以在任何Web服务器（如XAMPP或UWAMP）上正常工作。只需运行Uwamp，把YOUT项目到www文件夹，打开http://localhost

答

您可以使用角JS为包括另一个HTML文件

阅读文档这里

https://docs.angularjs.org/api/ng/directive/ngInclude

例子：

<div class="container"> 
    <div ng-include="'filename.htm'"></div> 
</div>

答

简单的方法...

1>添加JS文件，包括代码

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

    <script> w3IncludeHTML();</script>

2>只需拨打像例如HTML文件

<div w3-include-html="h1.html"></div>

在HTML页面中使用jQuery包含HTML页面

相关推荐