javascript - 在 HTML 中单击按钮时显示特定节点的 xml 数据

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>