Question

我有一个名为＆＃34;提交评估＆＃34;的按钮。我试图使用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;
}

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

有人可以帮帮我吗。

提前致谢

Answer 1

冻结屏幕，直到链接的ajax调用完成，就像这样

我做了什么：

在进行ajax调用之前在屏幕上显示像spinner这样的加载器图像。
第二个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调用

1 个答案: