divに外部のhtmlファイルをロードする方法

Question

ボタンクリックでdivにhtmlファイルをロードします。作成ボタンをクリックすると、 '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

ajaxリクエストの代わりに、jQueryのloadメソッドを使用できます。ここにドキュメントlinkがあります。

サンプルコード

<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 attributeはJavascriptを受け入れる - onclick="createarray.html"などが正しくありません。これらのボタンがクリックされたときにHTMLを読み込みたいと思っています。あなたのJavascriptがあまりにも私たちが代わりにこのように機能にそれを置くことができ、ほとんどの繰り返しです：

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

私たちは、このかかわらず、とのより良い行うことができます。

<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のご使用はエラーが発生します：あなたは、このようなあなたのonclick属性から呼び出します

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

：あなたの代わりにそれを使うことができるようにそれは主に、jQueryのloadメソッドを複製しています内容が有効なJSコードであると予想されるためです。

button要素で目立たないイベントハンドラを使用して、data属性を使用してカスタムデータを格納することができます。イベントハンドラでは、指定されたターゲットに必要なコンテンツをload()にすることができます。それは意味的に、より理にかなっているように私はクラスにdefaultOpenを改正

<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')); 
    }); 
}); 

注：これを試してみてください。

Answer 5

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