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请求echo一个新表，如果那个显示一个表用于所有ajax请求。如何在编译所有ajax请求后附加表？！另一个问题是检查标志不能正常工作！为什么？！

Answer 1

我的最终答案如下：

$(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 = false;
                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;
                            if(flag){TableDataString += '<td><i class="fa fa-times"></i></td>';}else{TableDataString += '<td><i class="fa fa-check"></i></td>';}  
                            TableDataString += '</tr>';
                        },
                        error: function (err) {
                            $('#domain_tables').html(err.error);
                        }
                    });//end $.ajax


        });//end get each suffix  

    });//end each domain


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

}）;

我认为这将解决你提到的最后两个问题。

Answer 2

您在.append()上使用$('#domain_tables')，以便每次生成新表时。在创建另一个AJAX请求队列之前，您应该清空#domain_tables div。
您没有选中选中哪些复选框以及哪些复选框未选中，因此您只需为<td>创建chechbox:checked个元素。
即使你添加了所有必需的<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);
                }
            });
        });
    });
});

完成所有ajax请求后如何附加表

2 个答案: