如何在单击按钮时加载XML数据？

Question

我创建了一个示例代码来查看xml数据。 页面加载时，我当前的代码将加载完整的xml文件。 但是单击按钮后，我需要加载XML文件。 我该如何解决该问题？

这是代码

 $(document).ready(function(){ $.ajax({ type:"GET", url:"contact.xml", dataType:"xml", success:showCD }); }); function showCD(xml){ xml = $(xml).children(); $(xml).children().each(function () { let TITLE = $(this).find("TITLE").text(); let ARTIST =$(this).find("ARTIST").text(); let COUNTRY = $(this).find("COUNTRY").text(); let COMPANY =$(this).find("COMPANY").text(); let html = `<div class="col-md-4"> <div class="thumbnail"> <p>${TITLE}</p> <p>${ARTIST}</p> <p>${COUNTRY}</p> <p>${COMPANY}</p> </div> </div>`; $("#xmldata").append(html); }); } 

 <section> <div class="container"> <input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');"> <div id="toggle_container" class='hide'> <div class="block"> <div class="row" id="xmldata"></div> </div> </div> </div> </section> 

Plunker

Answer 1

只需在button添加click事件监听button ，然后将AJAX请求放入处理程序即可。

 $(document).ready(function(){ // adding click event listener to the button $('#myButton1').on('click', function() { // make the AJAX request $.ajax({ type:"GET", url:"contact.xml", dataType:"xml", success:showCD }); }); }); function showCD(xml){ xml = $(xml).children(); $("#xmldata").empty(); xml.each(function () { let TITLE = $(this).find("TITLE").text(); let ARTIST =$(this).find("ARTIST").text(); let COUNTRY = $(this).find("COUNTRY").text(); let COMPANY =$(this).find("COMPANY").text(); let html = `<div class="col-md-4"> <div class="thumbnail"> <p>${TITLE}</p> <p>${ARTIST}</p> <p>${COUNTRY}</p> <p>${COMPANY}</p> </div> </div>`; $("#xmldata").append(html); }); } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <section> <div class="container"> <input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');"> <div id="toggle_container" class='hide'> <div class="block"> <div class="row" id="xmldata"></div> </div> </div> </div> </section>