顯示特定節點的XML數據的onclick按鈕

Question

<script> 
$(document).ready(function(){ 
    $.ajax({ 
     type: "GET", 
     url: "data.xml", 
     dataType: "xml", 
     success: function(xmlData) { 
      $("POS", xmlData).each(function(){ 
       var sr = $(this).find('SRNO').text(), 
        tname = $(this).find('TRANSACTIONNAME').text(), 
        rbasis = $(this).find('ROUTINGBASIS').text(), 
        lookup = $(this).find('LOOKUPRULE').text(), 
        rrule = $(this).find('ROUTINGRULE').text(); 

       var output = '<tr>' ; 
       output += '<td class="sr">'+sr+'</td>'; 
       output +='<td class="tname">'+tname+'</td>'; 
       output += '<td class="rbasis">'+rbasis+'</td>'; 
       output += '<td class="lookup">'+lookup+'</td>'; 
       output += '<td class="rrule">'+rrlule+'</td>; 

       output += '</tr>'; 
       $("#t3").append(output); 
      }); 
     } 
    }); 
}); 
</script> 

現在在頁面加載時，它就會節點POS的項目，但我想顯示負載空白頁，然後點擊按鈕，以顯示其條目。

Answer 1

地方你的一個按鈕單擊事件函數中調用Ajax。

<input type="button" id="btn" value="click"/> 
<script> 
$(document).ready(function() { 
    $("#btn").on("click", function { // binding button click to a function 
     $.ajax({ 
      type: "GET", 
      url: "data.xml", 
      dataType: "xml", 
      success: function (xmlData) { 
       $("POS", xmlData).each(function() { 

        var sr = $(this).find('SRNO').text(), 
         tname = $(this).find('TRANSACTIONNAME').text(), 
         rbasis = $(this).find('ROUTINGBASIS').text(), 
         lookup = $(this).find('LOOKUPRULE').text(), 
         rrule = $(this).find('ROUTINGRULE').text(); 


        var output = '<tr>'; 
        output += '<td class="sr">' + sr + '</td>'; 
        output += '<td class="tname">' + tname + '</td>'; 
        output += '<td class="rbasis">' + rbasis + '</td>'; 
        output += '<td class="lookup">' + lookup + '</td>'; 
        output += '<td class="rrule">' + rrlule + '</td>'; 

        output += ' < /tr>'; 
        $("#t3").append(output); 

       }); 
      } 
     }); 
    }); 
});  
</script>