加載多個json文件並使用ajax和jquery將其顯示到html

我想抓住三個不同的json文件，它們包含對象並使用jquery get方法將它們加載到單個頁面中。我需要抓住對象，並使用jquery將所有三個顯示到頁面。我無法加載和顯示所有三個...任何幫助表示讚賞。謝謝！加載多個json文件並使用ajax和jquery將其顯示到html

下面是代碼：

$(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>

來源

2017-10-17 Mujo M

代替.html()方法使用jQuery的.append()。

由於您使用.html()將取代以前的內容用，只要你把它新的內容，而與.append()它將增加等植物學內容。

更多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>

來源

2017-10-17 20:53:09

工作很好，謝謝！ –

@MujoM不客氣！ –

的html的方法替換所有的所選元素與您提供的HTML內容的內容。通過在同一元素上使用它三次，您將內容替換爲全部三次。

用.append替換.html，它將新數據添加到所選元素內容的末尾。

來源

2017-10-17 20:55:28 DreamWave

嘿！無論如何，當所有三個對象出現在頁面上時，停止運行該功能？因爲每次我點擊按鈕來運行函數，就會出現另一組相同的對象。無論如何，以防止發生？ –

@MujoM你可以刪除按鈕或停止工作。刪除它：$（「button」）。remove（）;並停止工作：$（「button」）。unbind（'click'）。只需在「click」回調結束處添加上面的一個（最後一行之前的一行） – DreamWave

@MujoM您還可以向元素添加一個類以指示它已被填充。在回調函數的末尾：$（「mydiv」）。addClass（'filled'）;並在開始時廣告「如果」if（！$（「mydiv」）。hasClass（'filled'）{其餘代碼在這裏} – DreamWave

加載多個json文件並使用ajax和jquery將其顯示到html

回答

相關問題