[英]How to load XML data on button click?
I created a sample code to view xml data. 我创建了一个示例代码来查看xml数据。 When the page is loading, my current code load full xml file. 页面加载时,我当前的代码将加载完整的xml文件。 But I need to load XML file after the button click. 但是单击按钮后,我需要加载XML文件。 How can I fix the issue? 我该如何解决该问题?
here is the code 这是代码
$(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>
Just add a click event listener to the button
and put the AJAX
request inside the handler. 只需在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.