javascript - 完成所有ajax请求后如何追加表

Question

我想使用 php 和 ajax 请求检查域可用性。请求将发送到“whois.apitruck.com”API，如下所示:“whois.apitruck.com/domain.com”。对于每个域，都会发送一个请求。我想在完成所有 ajax 请求后附加表格，但这不起作用!

$(document).ready(function () {
    $("#submit").click(function () {
        var domain = $('#domains').val().split("\n");
        var all_suffix = ["com","net","org","ir","biz","info","us","name","pro","eu","in","me","tv","cc"];
        var counter = 0;
        var TableDataString = '<table class="table table-bordered table-striped table-responsive domain-table"><thead><tr><th>ID</th><th>Domain Name</th><th>.Com</th><th>.Net</th><th>.Org</th><th>.Ir</th><th>.Biz</th><th>.Info</th><th>.Us</th><th>.Name</th><th>.Pro</th><th>.In</th><th>.Me</th><th>.Tv</th><th>.Cc</th></tr></thead><tbody>';
        var domain_count = domain.length;

        $.each(domain, function (i, val) {
            //increase i counter
            counter++;
            TableDataString += '<tr><td>'+ counter +'</td><td>'+ val +'</td>';

            $('input[type=checkbox]:checkbox:checked').each(function () {
                    var flag = '';
                    var suffix = $(this).val();
                        $.ajax({
                            type: "POST",
                            url: "includes/ajax/ajax.php",
                            dataType: "json",
                            data: {domain: val, suffix: suffix},
                            success: function (msg) {
                                flag = msg.suc;
                            },
                            error: function (err) {
                                $('#domain_tables').html(err.error);
                            }
                        });//end $.ajax

                    if(flag){TableDataString += '<td><i class="fa fa-times"></i></td>';}else{TableDataString += '<td><i class="fa fa-check"></i></td>';}    
            });//end get each suffix  
            TableDataString += '</tr>';
        });//end each domain

        TableDataString += '</tbody></table>';
        if(counter === domain_count){
            $(document).ajaxComplete(function(){
                $('#domain_tables').append(TableDataString);
            });
        }
    });
});

我使用了一个标志并在 $.ajax 之后检查它。显示问题解决了。但是对于每个 ajax 请求回显一个新表，如果为所有 ajax 请求显示一个表。如何在完成所有 ajax 请求后附加表格？!另一个问题是检查标志不能正常工作!为什么？!

Answer 1

1. 您正在使用 .append()在你的 $('#domain_tables') ，这样每次都会生成一张新表。您应该清空 #domain_tables div 在发出另一个 AJAX 请求队列之前。
2. 您没有检查哪些复选框已选中，哪些未选中，因此您只会创建 <td> chechbox:checked 的元素.
3. 即使您添加所有必要的 <td>元素，这些在 AJAX 中生成 success回调将添加在表的末尾，因为您的循环运行速度比 AJAX 请求快(简单地说)。你必须说明哪个 <td>元素属于哪个 AJAX 请求。

---

我会这样走:

$(document).ready(function () {
    $("#submit").click(function () {

        // check if anything is selected:
        if(!$('#domains').val() || !$('[type="checkbox"]:checked').length){
            return false;
        }
        // disable the button:
        var btn = $(this).prop('disabled', true);

        var domain = $('#domains').val().split("\n");
        var counter = 0;
        // an indicator to state when the button should be enabled again:
        var ajaxQueue = 0;
        var Table = '<table class="table table-bordered table-striped table-responsive domain-table"><thead><tr><th>ID</th><th>Domain Name</th><th>.Com</th><th>.Net</th><th>.Org</th><th>.Ir</th><th>.Biz</th><th>.Info</th><th>.Us</th><th>.Name</th><th>.Pro</th><th>.Eu</th><th>.In</th><th>.Me</th><th>.Tv</th><th>.Cc</th></tr></thead><tbody>';

        // create the td elements, but do not perform AJAX requests there:
        $.each(domain, function (i, val) {
            counter++;
            Table += '<tr><td>'+ counter +'</td><td>'+ val +'</td>';
            $('input[type=checkbox]').each(function () {
                if($(this).is(':checked')){
                    ajaxQueue++;
                    // if checkbox is checked make td element with specified values and a "load-me" class:
                    Table += '<td class="load-me" data-domain="'+val+'" data-suffix="'+$(this).val()+'"><small>loading...</small></td>';
                }else{
                    Table += '<td><span class=text-muted><i class="fa fa-minus"></i></span></td>';
                }
            });
            Table += '</tr>';
        });

        // Replace HTML of the 'domain_tables' div and perform AJAX request for each td element with "load-me" class:
        $('#domain_tables').html(Table+'</tbody></table>').find('td.load-me').each(function(){
            var td = $(this);
            $.ajax({
                type: "POST",
                url: "includes/ajax/ajax.php",
                dataType: "json",
                data: {domain: td.attr('data-domain'), suffix: td.attr('data-suffix')},
                success: function (msg) {
                    // decrease ajaxQueue and if it's 0 enable button again:
                    ajaxQueue--
                    if(ajaxQueue === 0){
                        btn.prop('disabled', false);
                    }
                    if(msg.suc == false){
                        td.html('<span class=text-danger><i class="fa fa-times"></i></span>');
                    }else{
                        td.html('<span class=text-success><i class="fa fa-check"></i></span>');
                    }
                },
                error: function (err) {
                    $('#domain_tables').html(err.error);
                }
            });
        });
    });
});