Question

我得到了一段让我疯狂的代码。我从服务器加载一些数据需要一些时间，因此我想显示一个＆＃34; loading-icon＆＃34;。但是图标没有显示，所以我在Chrome中调试了代码然后它正在运行。

$(".k-loading-mask").show(); 
//loading the data from the server
var purchaseInvoiceItems = getOpenPurchaseInvoiceItems(id);
viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items);

var prepaymentableOrders = getPrepaymentableOrders(id);
viewmodel.PrepaymentableOrders = ko.mapping.fromJS(prepaymentableOrders, {}, viewmodel.PrepaymentableOrders);
//loading done... hide the loading-icon.
$("div.k-loading-mask").hide();

修改

function getOpenPurchaseInvoiceItems(id) {
    var result = jQuery.ajax({
        url: '/purchaseinvoices/getopenpurchaseinvoiceitems',
        data: JSON.stringify({ supplierId: id }),
        async: false,
        type: 'POST',
        contentType: "application/json"
    });
    var json = result.responseText;
    var purchaseInvoiceItems = eval("(" + json + ")");
    return purchaseInvoiceItems;
}

function getPrepaymentableOrders(id) {
    var result = jQuery.ajax({
        url: '/purchaseinvoices/getprepaymentableorders',
        data: JSON.stringify({ supplierId: id }),
        async: false,
        type: 'POST',
        contentType: "application/json"
    });
    var json = result.responseText;
    var purchaseInvoiceItems = eval("(" + json + ")");
    return purchaseInvoiceItems;
}

EDIT2

在重构了对异步ajax的调用后，我遇到了问题，done()的{{1}}从未被调用过。当我直接调用函数时，会调用getOpenPurchaseInvoiceItems的{{1}}。但Chrome Networkanalysis告诉我网络交易在约3秒后完成。 Maris的回答对我来说也不起作用，done()永远不会被调用。

getPrepaymentableOrders

编辑3 添加了一个错误回调，它实际上被触发了。

状态200
  statusText OK
  responseText（结果项的Json）

我不安静地知道结果出错的原因......

趣味-情况：这是有效的，似乎我的前任有同样的问题，因为这段代码是我的前任代码的修改版本。

done()

好像结果无法直接解析？！

提琴手回复

HTTP / 1.1 200 OK
  服务器：ASP.NET Development Server / 11.0.0.0
  日期：星期一，2015年9月28日11:29:15 GMT
  X-AspNet-Version：4.0.30319
  X-AspNetMvc-Version：3.0
  Cache-Control：private，s-maxage = 0
  Content-Type：application / json;字符集= UTF-8
  内容长度：126537
  连接：关闭

[{＆＃34; GoodsReceiptItemId＆＃34;：311360，＆＃34; PurchaseOrderNumber＆＃34;：＆＃34; BE0010018＆＃34;＆＃34; SupplierProductNumber＆＃34;：＆＃34; 205.00-122＆＃34;＆＃34; ProductNumber＆＃34;：＆＃34; 205.00-122＆＃34;＆＃34; SupplierDeliveryNumber＆＃34;：＆＃34; 5503＆＃34;＆＃34; GoodsReceiptDate＆＃34; ：新日期（1442527200000），＆＃34;描述＆＃34;：＆＃34; 001-4631-00，\＆＃34; LA-EE \＆＃34;＆＃34;，＆＃34; ShouldBePayed＆＃ 34;：假，＆＃34;量＆＃34;：500.00000＆＃34;价格＆＃34;：2.66000＆＃34; PriceUnit＆＃34;：1.00000＆＃34; TotalPrice＆＃34;：1330.00000，＆＃34; PurchaseOrderId＆＃34;：309360，＆＃34;产品编号＆＃34;：4792，＆＃34; GoodsReceiptId＆＃34;：299080，＆＃34;标识＆＃34;：0，＆＃34; HasBeenSaved＆＃34 ;：假，＆＃34;错误＆＃34; {＆＃34;错误＆＃34;：[]，＆＃34; HasAnyError＆＃34;：假，＆＃34; HasSumError＆＃34;：假} ,. ...]

Answer 1

由于在javascript中只有一个线程并且您正在对api运行同步调用，因此UI会在请求完成之前被冻结。这就是为什么你根本看不到装载栏的原因。因此，您必须使用异步调用和承诺来实现您想要的目标。

下一个代码应该有用。

function getOpenPurchaseInvoiceItems(id) {
   return $.post('/purchaseinvoices/getopenpurchaseinvoiceitems', { supplierId: id });
}

function getPrepaymentableOrders(id) {
    return $.post('/purchaseinvoices/getprepaymentableorders', { supplierId: id });
}


$(".k-loading-mask").show(); 
//loading the data from the server
var purchaseInvoiceItemsPromise = getOpenPurchaseInvoiceItems(id);
var prepaymentableOrdersPromise = getPrepaymentableOrders(id);
$.when(purchaseInvoiceItemsPromise, prepaymentableOrdersPromise ).done(function(purchaseInvoiceItems, prepaymentableOrders){
   viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items);
   viewmodel.PrepaymentableOrders = ko.mapping.fromJS(prepaymentableOrders, {}, viewmodel.PrepaymentableOrders);
   $("div.k-loading-mask").hide();
})

永远不要使用同步ajax调用。如果您出于某种原因想要使用同步调用，那么您肯定会做错事。

Answer 2

尝试使用异步调用，如下所示：

jQuery.ajax({
        url: '/purchaseinvoices/getopenpurchaseinvoiceitems',
        data: JSON.stringify({ supplierId: id }),
        type: 'POST',
        contentType: "application/json"
    }).done(function(purchaseInvoiceItems){
      //.....
    })

PS：永远不要使用“eval”。如果你正在获得JSON，并且标题说它是JSON，那么jquery足够聪明，可以将结果转换为实际对象。但是，如果需要将JSON字符串转换为object，请使用JSON.parse

div仅在调试

2 个答案: