javascript - 数据返回但无法在 jquery ajax 中发布

Question

我一生都无法理解为什么会发生这种情况。

基本上，我使用以下代码从数据库中带回表行。

var getCposInputs = {
            'type': 'viewcpos',
            'quoteid': '<?php echo $_GET['id']; ?>'
        };

        $.ajax({
            type: 'POST',
            url: '/Applications/Controllers/Quotes/ajax-add-sin.php',
            data: getCposInputs,
            dataType: 'html',
            encode: true
        }).done(function(data){

            //$('body').html(data);
            buildcotable += data;

        });

正如您所看到的，有一条注释掉的行，删除后会直接将详细信息显示到正文中，而不是稍后使用 JavaScript 中的 .html() 函数发送出去的变量。

所以完整的 jQuery 代码是:

var buildcotable = '';
    var buildtrs = $('#formentry15').val();
    var coArray = '';
    var coArrayNumber = 1;

    buildcotable += '<div class="table-responsive">';
    buildcotable += '<table class="table table-bordered">';

    buildcotable += '<thead>';
    buildcotable += '<th class="text-center">Number</th>';
    buildcotable += '<th class="text-center">Price</th>';
    buildcotable += '<th class="text-center">Installments</th>';
    buildcotable += '<th class="text-center">Contact Initials</th>';
    buildcotable += '<th class="text-center">Options</th>';
    buildcotable += '</thead>';

    buildcotable += '<tbody id="jquerypotable">';

    //lets do a check and see how many are listed
    if(buildtrs != 'TBC'){

        var getCposInputs = {
            'type': 'viewcpos',
            'quoteid': '<?php echo $_GET['id']; ?>'
        };

        $.ajax({
            type: 'POST',
            url: '/Applications/Controllers/Quotes/ajax-add-sin.php',
            data: getCposInputs,
            dataType: 'html',
            encode: true
        }).done(function(data){

            $('body').html(data);
            buildcotable += data;

        });

    } else {

        buildcotable += '<tr id="jqueryporow1">';
        buildcotable += '<td><input type="hidden" value="No" id="jqueryponumber1" class="form-control">No CPO\'s have been submitted</td>';
        buildcotable += '<td><input type="hidden" value="" id="jquerypovalue1" class="form-control"></td>';
        buildcotable += '<td class="text-center"><input type="hidden" value="" id="jquerypoinstallments1" class="form-control"></td>';
        buildcotable += '<td><input type="hidden" value="" id="jquerypocontactinitials1" class="form-control"></td>';
        buildcotable += '<td class="text-center">&nbsp;</td>';
        buildcotable += '</tr>';

    }

    buildcotable += '</tbody>';

    buildcotable += '</table>';
    buildcotable += '<p><a href="#" class="btn btn-default btn-block" id="addnewpo">Add New CPO Number</a></p>';
    buildcotable += '<p><a href="#" class="btn btn-danger btn-block" id="ubldonepo">Done</a></p>';
    buildcotable += '</div>';

    $('.ubl-section-7').html(buildcotable);

我知道数据返回正常，因为当我删除 $('body').html(data); 的注释时然后它显示信息。

但是如果尝试将其放入变量中，它根本不会执行任何操作。

关于为什么会发生这种情况有什么想法吗？

谢谢

Answer 1

您必须确保在 ajax 请求检索其数据后生成输出。否则，您的最后一行代码甚至在执行 buildcotable += data; 之前就已运行，因为 ajax 请求尚未准备好(它是异步的)。尝试这样的事情:

var buildcotable_beg = '<table><tr> ...';
var buildcotable_cnt = '';
var buildcotable_end = '...</table>';
var full_bld_tbl = '';

if (buildtrs != 'TBC') {
    $.ajax(...).done(function(buildcotable_cnt) {
        full_bld_tbl = buildcotable_beg + buildcotable_cnt + buildcotable_end;
        $('.ubl-section-7').html(full_bld_tbl);
    });
} else {
   buildcotable_cnt = '<tr>...</tr>';

   full_bld_tbl = buildcotable_beg + buildcotable_cnt + buildcotable_end;
   $('.ubl-section-7').html(full_bld_tbl);
}