如何将外部html文件加载到div中

Question

我想在点击按钮时将html文件加载到div中。 当我点击“创建”按钮时，它应该将“createarray.html”文件加载到div tabcontent中。

这是我的html文件：

<div class="tab">
<button class="tablinks" onclick="createarray.html" id= "defaultOpen">Creation</button>
<button class="tablinks" onclick="insertarray.html">Insertion</button>
<button class="tablinks" onclick="deletearray.html">Deletion</button>  
</div>
<div id="Create" class="tabcontent">
</div>
<div id="Insert" class="tabcontent">
</div>
<div id="delete" class="tabcontent">
</div>

这是我的java脚本：

$.ajax({
url : "createarray.html",
dataType: "html",
success : function (data) {
    $("#create").html(data);
}
});
$.ajax({
url : "insertarray.html",
dataType: "html",
success : function (data) {
    $("#insert").html(data);
}
});
$.ajax({
url : "deletearray.html",
dataType: "html",
success : function (data) {
    $("#delete").html(data);
}
});

有人可以帮我这个吗？

Answer 1

您可以使用jQuery的load方法，而不是发出ajax请求。 这是文档链接 。

示例代码

<button class="tablinks" data-url="insertarray.html" data-target="create">Insertion</button>

$(function(){
    $(".tablinks").click(function(){
        var url = $(this).attr("data-url");
        var target = "#" + $(this).attr("data-target");
        $(target).load(url);
    });
});

Answer 2

HTML：

    <div class="tab">
    <button class="tablinks" onclick="createarray()" id= "defaultOpen">Creation</button>
    <button class="tablinks" onclick="insertarray()">Insertion</button>
    <button class="tablinks" onclick="deletearray()">Deletion</button>  
    </div>
    <div id="create" class="tabcontent">
    </div>
    <div id="insert" class="tabcontent">
    </div>
    <div id="delete" class="tabcontent">
    </div>

使用Javascript：

function createarray(){
$.ajax({
url : "createarray.html",
success : function (data) {
    $("#create").html(data);
}
});
}

function insertarray(){
$.ajax({
url : "insertarray.html",
success : function (data) {
    $("#insert").html(data);
}
});
}

function deletearray(){
$.ajax({
url : "deletearray.html",
success : function (data) {
    $("#delete").html(data);
}
});
}

Answer 3

onclick属性接受Javascript - onclick="createarray.html"等不正确。 我假设你想在点击这些按钮时加载你的HTML。 你的Javascript也有点重复，所以我们可以把它放在这样的函数中：

function loadHtml(file){
    $.ajax({
        url : file+"array.html",
        dataType: "html",
        success : function (data) {
            $("#"+file).html(data);
        }
    });
}

尽管如此，我们可以做得更好。 它主要是复制jQuery加载方法，所以你可以使用它：

function loadHtml(file){
    $("#" + file).load(file + "array.html");
}

然后你可以从你的onclick属性调用，如下所示：

<button class="tablinks" onclick="loadHtml('create')" id= "defaultOpen">Creation</button>
<button class="tablinks" onclick="loadHtml('insert')">Insertion</button>
<button class="tablinks" onclick="loadHtml('delete')">Deletion</button>  

Answer 4

首先，你使用onclick将导致错误，因为内容应该是有效的JS代码。

为了实现您的需求，您可以在button元素上使用不显眼的事件处理程序以及用于存储其自定义数据的data属性。 在事件处理程序中，您可以将所需内容load()到给定目标。 尝试这个：

<button type="button" class="tablinks defaultOpen" data-url="createarray.html" data-target="#create">Creation</button>
<button type="button" class="tablinks" data-url="insertarray.html" data-target="#insert">Insertion</button>
<button type="button" class="tablinks" data-url="deletearray.html" data-target="#delete">Deletion</button>

$(function() {
  $('.tablinks').click(function() {
    var target = $(this).data('target');
    $(target).load($(this).data('url'));
  });
});

请注意，我将defaultOpen修改为一个类，因为它在语义上更有意义。

Answer 5

$(document).ready(function(){    
  $("#idOfWhereYouClick").click(function(){
  $("#idOfDivWhereYouWantToLoad").load("yourPage.html");
});