让jQuery等待$ .post完成更新页面 [英] Make jQuery Wait For $.post to complete updating page

问题描述

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

我无法嵌套函数，因为DoGoogleMap（）在RefreshSubdivisionList（）函数的作用域内不起作用。

如何在$ .bt调用DoGoogleMap（）函数之前等待$ .post完成将更新后的HTML写入页面？

 函数RefreshSubdivisionList（）{
 
 var formActionScript = jQuery（＃RefreshSubdivisionForm）。attr（'action'）; 
 
 jQuery.post（formActionScript，jQuery（＃RefreshSubdivisionForm）。serialize（））。done（function（data）{
 
 jQuery（。subdivision-list ）.html（data）.show（）; 
 
}，'text'）; 
 
返回true; 
 
 
 
 jquery（＃RefreshSubdivisionForm）。submit（function（event）{
 
 event.preventDefault（）; 
 jQuery.when（RefreshSubdivisionList（））.done（function（）{
 jQuery（'＃map_canvas'）.gmap（'destroy'）; 
 DoGoogleMap（）; 
 }）; 
 
 return false; 
 
}）; 
  

解决方案

jQuery.when（） 提供了一些机制来处理同步多个异步调用的情况。看一看：

 函数ajax1 {
 return $ .ajax（/ page1 / action，{}） ; 
} 
 
函数ajax2 {
 return $ .ajax（/ page2 / action，{}）; 
} 
 
 var promise = $ .when（ajax1，ajax2）; 
 
 promise.done（函数（resp1，resp2）{
 //参数resp1和resp2是它们各自的ajax1和ajax2调用的响应
 // 
 //每个参数都是一个数组，其中包含ajax响应
 //具有以下签名：
 // [data，statusText，jqXHR] 
 //请参阅：http：// api .jquery.com / jquery.ajax /＃jqXHR 
 
 //假设ajax1的数据响应是：Hello
 //假设ajax2的数据响应是：world
 var data = resp1 [0] ++ resp2 [0]; 
 
 if（（/hello\world/i).test(data））{
 console .info（Promises rules！）; 
} 
}）; 
  

在前面的示例中，我们处理 success 响应，但以相同的方式我们可以处理失败响应。

jQuery.ajax（）返回的对象rel =nofollow> jqXHR a>实现 Promise接口，为它们提供 Promise （请参阅获取更多信息）

其他方法是创建延期的对象，然后使用预期的结果解析每个延迟的对象，最后统一已解析的响应：

  var d1 = $ .Deferred（）; 
 var d2 = $ .Deferred（）; 
 $ b $ .when（d1，d2）.done（function（resp1，resp2）{
 console.log（resp1）; //Fish
 console.log resp2）; //Pizza
}）; 
 
 d1.resolve（Fish）; 
 d2.resolve（Pizza）; 
  

I am calling a function to refresh a part of the current page with a jQuery.post - and then after that function completes I need to execute another function that updates the Google Map on that page, using the updated HTML written out from the $.post

I cannot nest the functions because DoGoogleMap() won't work within the scope of the RefreshSubdivisionList() function.

How do I make it wait for the $.post to finish writing the updated HTML to the page before it calls the DoGoogleMap() function?

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.when() provides mechanisms to deal with the case of synchronizing multiple async calls. Take a look:

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!");
  }
});

In the previous example we handle success responses, but in the same way we can handle failure responses.

The jqXHR object returned by jQuery.ajax() implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information)

Other way is to create deferred objects, and resolve each deferred object with the expected result and finally, unify the resolved responses:

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");

这篇关于让jQuery等待$ .post完成更新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！