阻止屏幕不适用于多个 AJAX 调用

Question

我有一个名为 "Submit Assessment" 的按钮。我正在尝试使用 ajax 调用保存图像，并根据结果执行另一个 ajax 调用以便将 post 数据发送到服务器。编码结构如下

JS代码：

var isPostedImage=false;
Submit Click function
{
   //call to screen lock function
   PostAssessmentData();
}

function PostAssessmentData()
{
   isPostedImage=PostImage();
   if (isPostedImage)
   {
      //AJAX call to post data to server
      async:false;
   }
}

PostImage=function()
{
  //AJAX call to save Image in server
  async:false;
  //if it is successful 
  isPostedImage=true;
}

我的问题是我调用锁屏功能作为第一步。但是在执行上述 ajax 个调用之前，屏幕不会锁定。我也让那些 async :false 。我认为延迟对象是一个很好的概念。但是我不知道如何在这种情况下使用延迟对象概念。

谁能帮帮我。

提前致谢

Answer 1

冻结屏幕直到链式 ajax 调用完成是这样完成的

我做了什么：

在进行 ajax 调用之前在屏幕上显示加载程序图像（如旋转器）。
第二个 ajax 调用将在第一个 ajax 调用的成功回调中执行，以便从第一个调用收到的响应发送到第二个调用。
所有调用完成后，从屏幕上隐藏微调器，允许用户与屏幕交互。

JS代码：

$('#loading').hide();

function p1() {
   return $.post("/echo/html/", {
    html: "Happy"
    });
}

function p2(firstCallData) {
    var newData = firstCallData + " Coding :)";
    return $.post("/echo/html/", {
       html: newData
    });
}

function clickHandler() {
    $('#loading').show();
    $.when(p1()).then(function (firstCallResults) {
        console.log(firstCallResults);
        $.when(p2(firstCallResults)).then(function (secondCallResults)     {
             console.log(secondCallResults);
             alert("All ajax calls processed.\n" + secondCallResults);
             $('#loading').hide();
        });
    });
}

$(function () {
   $("#go").click(clickHandler);
});

Live Demo @ JSFiddle

注意：以上解决方案是基于一个通用的想法，因此不应将此解决方案视为最终解决方案

阻止屏幕不适用于多个 AJAX 调用

Block Screen does not work with multiple AJAX calls

jquery

jquery-blockui

jquery-deferred