加载多个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

回答

相关问题