单击按钮时在另一个 html 文件中包含一个 html 页面答案

【问题标题】：Include a html page inside another html file on button click单击按钮时在另一个 html 文件中包含一个 html 页面
【发布时间】：2014-07-03 18:03:51
【问题描述】：

我有很多 html 文件，其中一个是我有很多按钮的主 html 页面。我想要的是在所需的 div 标签中的主 html 文件中加载一个文件的内容。我不希望单个文件包含整个 html 文本，所以我想将不同文件中的 html 文本分开，并仅在用户单击的按钮单击时加载该部分。

【问题讨论】：

标签： c# php jquery html ajax

【解决方案1】：

请尝试使用此代码。

<html lang="en">
<head>
<meta charset="utf-8">
<title>load index page</title>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
var browser=navigator.userAgent;

alert("ASHIk");
$("#success").load("index.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});

</script>
</body>
</html

【讨论】：

【解决方案2】：

对于 angular.js 来说看起来不错。看看这个：

https://docs.angularjs.org/tutorial/step_07

【讨论】：

【解决方案3】：

您可以使用 ajax 调用（使用 JQuery）加载新的 HTML 文件并将响应发送到相关的 div。

    $.ajax({
        url: <YourUrl>,
        type: "GET",
        dataType: "html",
        cache: false,
        success: function (data) {
            $('#TargetDiv').replaceWith($(data));
        }
    }

【讨论】：

我们没有任何类型的服务器参与其中。有一个普通的 html 页面，当用户点击时应该打开。