Javascript 基于AJAX请求打印div

我所做的前提原则上很简单：

用户访问该页面

对后端函数进行AJAX调用，该函数检查数据库中是否有要打印的文档

如果返回数据，将运行一个循环，并在该循环中进行另一个AJAX调用以生成HTML

如果成功生成HTML，则会将其附加到元素（printDiv）中。这将强制运行window.print函数

打印成功后，将进行最后一次调用，以更新打印这些文档的数据库

问题：第一次访问页面时。调用完成后，当它最终找到数据时，会返回数据。但是在第一次访问时，它甚至没有时间将HTML附加到文档中，而是打开打印对话框。 一旦对话框关闭，它就会将HTML附加到文档中

• ID990在AJAX中加载，没有HTML附加到printDiv，出现打印对话框

• 打印对话框关闭，ID 990 HTML随后附加到div

• ID991在AJAX中加载，HTML附加到printDiv，打印对话框出现，但要打印ID990HTML

• ID992在AJAX中加载，HTML附加到printDiv，打印对话框出现，但打印ID991HTML

代码：

var isActive=true；
var isEmpty=true；
$（文档）.ready（函数（）{
pollServer（）；
});
函数pollServer（）
{
如果（isActive）
{
setTimeout（函数（）{
var isEmpty=true；
$.ajax({
url:“”，
类型：“POST”，
数据类型：“json”，
成功：功能（结果）{
for（var输入结果）{
if（result.hasOwnProperty（key））{
isEmpty=false；
GetReceive（结果[key].id）；
}
} 
如果（isEmpty==false）{
console.log（isEmpty）；
//chrome回调
var printCompleteCallback=函数（）{
console.log（'chrome'）；
}
window.print（）；
if（window.onafterprint）{//检查浏览器是否支持window.onafterprint事件处理程序（Firefox和IE）
$（窗口）。一个（“后打印”，printCompleteCallback）；
for（var输入结果）{
if（result.hasOwnProperty（key））{
UpdatePrintReceive（结果[key].id）；
console.log（“打印完成”）；
}
} 
}
否则{
setTimeout（printCompleteCallback，0）；
//更新打印的数据库
for（var输入结果）{
if（result.hasOwnProperty（key））{
UpdatePrintReceive（结果[key].id）；
console.log（“其他浏览器”）；
}
} 
}
$（'#printDiv'）.html（''）；
}
//成功逻辑
pollServer（）；
},
错误：函数（xhr、状态、错误）{
var errorMessage=xhr.status+'：'+xhr.statusText
console.log（'Error-'+errorMessage）；
pollServer（）；
}});
}, 2500);
}
}
函数getReceipt（id）{
$.ajax({
url:“+”/“+id”，
类型：“POST”，
成功：功能（结果）{
$（'#printDiv'）。追加（结果）；
},
错误：函数（xhr、状态、错误）{
var errorMessage=xhr.status+'：'+xhr.statusText
console.log（'Error-'+errorMessage）；
}});
}
函数updatePrintReceivement（id）{
$.ajax({
url:“+”/“+id”，
类型：“POST”，
成功：功能（结果）{
控制台日志（结果）；
},
错误：函数（xhr、状态、错误）{
var errorMessage=xhr.status+'：'+xhr.statusText
console.log（'Error-'+errorMessage）；
}});
}

JQuery默认异步运行AJAX请求（）：

---

这意味着对

window.print（）。您的内部AJAX调用需要同步运行，以便外部AJAX调用在完成之前无法继续进行。
很有趣，谢谢。我从没想到这是个问题，我把电话改成了
<script>
        var isActive = true;
        var isEmpty = true;
    
        $( document ).ready(function () {
            pollServer();
        });
        
        function pollServer()
        {
            if (isActive)
            {
                window.setTimeout(function () {
                    var isEmpty = true;
                    $.ajax({
                        url: "<?php echo site_url('CONTROLLER/unprinted');?>",
                        type: "POST",
                        dataType: "json",
                        success: function (result) {
                            for (var key in result) {
                               if (result.hasOwnProperty(key)) {
                                     isEmpty = false;
                                     getReceipt(result[key].id);
                               }
                            } 
                                                        
                            if( isEmpty == false ) {
                                console.log(isEmpty);
                                // chrome callback
                                var printCompleteCallback = function () {
                                    console.log('chrome');
                                }
                                
                                window.print();
                                if (window.onafterprint) { //check if browser supports window.onafterprint event handler (Firefox and IE)
                                    $(window).one("afterprint", printCompleteCallback);
                                    
                                    for (var key in result) {
                                       if (result.hasOwnProperty(key)) {
                                             updatePrintReceipt(result[key].id);
                                             console.log('print complete');
                                       }
                                    } 
                                }
                                else {
                                    setTimeout(printCompleteCallback, 0);
                                    
                                    // update db for those printed
                                    for (var key in result) {
                                       if (result.hasOwnProperty(key)) {
                                             updatePrintReceipt(result[key].id);
                                             console.log('other brower');
                                       }
                                    } 
                                    
                                }
                                    
                               $('#printDiv').html('');
                            }
                            
                             
                            //SUCCESS LOGIC
                            pollServer();
                            
                        },
                        error: function(xhr, status, error){
                             var errorMessage = xhr.status + ': ' + xhr.statusText
                             console.log('Error - ' + errorMessage);
                             pollServer();
                         }});
                }, 2500);
            }
        }
        
        function getReceipt(id){
            $.ajax({
                url: "<?php echo site_url('CONTROLLER/receipt_auto');?>" + "/" + id,
                type: "POST",
                success: function (result) {
                    $('#printDiv').append(result);
                },
                error: function(xhr, status, error){
                     var errorMessage = xhr.status + ': ' + xhr.statusText
                     console.log('Error - ' + errorMessage);
                }});
        }
        
        function updatePrintReceipt(id){
            $.ajax({
                url: "<?php echo site_url('CONTROLLER/receipt_update');?>" + "/" + id,
                type: "POST",
                success: function (result) {
                    console.log(result);
                },
                error: function(xhr, status, error){
                     var errorMessage = xhr.status + ': ' + xhr.statusText
                     console.log('Error - ' + errorMessage);
                 }});
        }


        
    </script>

async (default: true)
Type: Boolean
By default, all requests are sent asynchronously (i.e. this is set to true by default). 
If you need synchronous requests, set this option to false.