複数のjsonファイルをロードし、ajaxとjqueryを使用してhtmlに表示します。

Question

jquery getメソッドを使用して、オブジェクトを含む3つの異なるjsonファイルを取得して1つのページにロードしようとしています。私は、オブジェクトをつかんで、jqueryを使って3つすべてをページに表示する必要があります。私は3つすべてのロードと表示に問題があります...どんな助けもありがとうございます。ありがとう！

$(document).ready(function(){ 
$("button").click(function(){ 
    $.get("objectone.json", function(data){ 
     $('#mydiv').html((JSON.stringify(data))); 
    }); 
    $.get("objectwo.json", function(data){ 
     $('#mydiv').html((JSON.stringify(data))); 
    }); 
    $.get("objectthree.json", function(data){ 
     $('#mydiv').html((JSON.stringify(data))); 
    }); 
    }); 
}); 

とHTML：：

<button type="button" name="button">Click Me</button> 

<div id="mydiv"> 

</div> 

Answer 1

代わりの.html()方法の使用はJQueryの.append()ここ

はコードです。

あなたは.append()と、それは exisitingコンテンツに追加されます一方、それは、あなたがそれを呼び出すたびに新しいコンテンツとの以前の内容 を置き換えます.html()を使用しているので。

続きを読むhere

$(document).ready(function() { 
 
    var url = "https://rawgit.com/typicode/json-server/master/routes.json"; 
 
    $("button").click(function() { 
 
    $.get(url, function(data) { 
 
     $('#mydiv').append((JSON.stringify(data))); 
 
    }); 
 
    $.get(url, function(data) { 
 
     $('#mydiv').append((JSON.stringify(data))); 
 
    }); 
 
    $.get(url, function(data) { 
 
     $('#mydiv').append((JSON.stringify(data))); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" name="button">Click Me</button> 
 

 
<div id="mydiv"> 
 

 
</div>

Answer 2

.htmlの方法は、あなたが提供するHTMLコンテンツと、選択した要素のすべての内容を置き換えます。 同じ要素に3回使用すると、すべての内容が3回置き換えられます。

.htmlを.appendに置き換えます。これは、選択した要素の内容の最後に新しいデータを追加します。