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

只需将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>

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

1 个答案: