让 jQuery 等待 $.post 完成更新页面答案

【问题标题】：Make jQuery Wait For $.post to complete updating page让 jQuery 等待 $.post 完成更新页面
【发布时间】：2015-06-18 18:16:27
【问题描述】：

我正在调用一个函数来使用 jQuery.post 刷新当前页面的一部分 - 然后在该函数完成后，我需要执行另一个函数来更新该页面上的 Google 地图，使用从$.post

我无法嵌套函数，因为 DoGoogleMap() 无法在 RefreshSubdivisionList() 函数的范围内工作。

如何让它在调用 DoGoogleMap() 函数之前等待 $.post 完成将更新的 HTML 写入页面？

function RefreshSubdivisionList() {

    var formActionScript = jQuery("#RefreshSubdivisionForm").attr('action');

    jQuery.post(formActionScript, jQuery("#RefreshSubdivisionForm").serialize()).done(function(data) {

        jQuery(".subdivision-list").html(data).show();

    }, 'text');

    return true;

}


jQuery("#RefreshSubdivisionForm").submit(function(event) {

    event.preventDefault();
    jQuery.when( RefreshSubdivisionList() ).done(function(){
        jQuery('#map_canvas').gmap('destroy');
        DoGoogleMap();
    });

    return false;

});

【问题讨论】：

标签： jquery function .post

【解决方案1】：

jQuery.when() 提供了处理同步多个 async 调用情况的机制。看看：

function ajax1 {
    return $.ajax("/page1/action", {});
}

function ajax2 {
    return $.ajax("/page2/action", {});
}

var promise = $.when(ajax1, ajax2);

promise.done(function (resp1, resp2) {
  // The parameters resp1 and resp2 are the responses 
  // of their respective ajax1 and ajax2 calls.
  // Each parameter is an array that contains the ajax response
  // with the following signature:
  // [data, statusText, jqXHR]
  // See: http://api.jquery.com/jquery.ajax/#jqXHR

  // suppose the data response for ajax1 is: "Hello"
  // suppose the data response for ajax2 is: "world"
  var data = resp1[0] + " " + resp2[0];

  if ((/hello\sworld/i).test(data)) {
    console.info("Promises rules!");
  }
});

在前面的示例中，我们处理 success 响应，但同样我们可以处理 failure 响应。

jQuery.ajax() 返回的jqXHR 对象实现了Promise 接口，为它们提供了Promise 的所有属性、方法和行为（参见@ 987654325@了解更多信息）

另一种方法是创建deferred对象，并用预期的结果解析每个延迟对象，最后统一解析的响应：

var d1 = $.Deferred();
var d2 = $.Deferred();

$.when(d1, d2).done(function (resp1, resp2) {
    console.log(resp1); // "Fish"
    console.log(resp2); // "Pizza"
});

d1.resolve("Fish");
d2.resolve("Pizza");

【讨论】：

【解决方案2】：

你可以把DoGoogleMap();直接放在post的done回调中，不是吗？

然后它会在帖子完成后加载您的地图。

【讨论】：

我最初尝试时它不起作用，但现在似乎是。我认为在另一个内部运行该功能时存在范围问题，但它现在工作正常。奇怪的。谢谢！

【解决方案3】：

要完成这项工作，您需要做的就是从RefreshSubdivisionList 方法返回 jqXHR 对象。

jQuery 为 post 之类的 XHR 请求提供了 deffered 接口，when 方法使用该接口来确定请求的状态。如果完成或失败等。

function RefreshSubdivisionList() {
    var formActionScript = jQuery("#RefreshSubdivisionForm").attr('action');

    var postObj = jQuery.post(formActionScript, jQuery("#RefreshSubdivisionForm").serialize());

    postObj.done(function(data) {
        jQuery(".subdivision-list").html(data).show();
    }, 'text');

    return postObj;
}


jQuery("#RefreshSubdivisionForm").submit(function(event) {
    event.preventDefault();
    jQuery.when( RefreshSubdivisionList() ).done(function(){
        jQuery('#map_canvas').gmap('destroy');
        DoGoogleMap();
    });

    return false;

});

【讨论】：