Jquery 块屏幕不适用于多个AJAX调用

我有一个按钮叫“提交评估”。在这里，我尝试使用ajax调用保存图像，并根据结果执行另一个ajax调用，以便将数据发布到服务器。 编码结构如下

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;
}

$('#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);
});

我的问题是，第一步我调用了锁屏功能。但在执行上述ajax调用之前，屏幕不会锁定。我已经将这些设置为async:false。我认为延迟对象是一个很好的概念。但我不知道在这个场景中如何使用延迟对象概念

谁能帮帮我吗

---

提前感谢

冻结屏幕，直到链接的ajax调用完成

我所做的：

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;
}

$('#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);
});

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

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;
}

$('#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);
});

---

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

您是说

postsessmentdata（）

中的ajax调用在

postmage（）中的ajax调用之前执行得很好吗？