Как выполнить функцию после завершения вызова Ajax

Question

У меня есть две функции, в первой функции есть ajax-вызов, поэтому я хочу, чтобы вторая функция выполнялась после вызова ajax (здесь я перезагружаю страницу), можете ли вы, пожалуйста, Помоги мне?
Вот код ниже

<div id="exapnd_or_collapse_div" class="exapnd_or_collapse_div" onclick="changeLayout();"> 
<script> 
function changeLayout() { 
    alert('change layout'); 

    try { 
     jQuery.ajax({ 
      url:'<%=resourceURL.toString()%>', 
      dataType: "text", 
      data:{ 
       <portlet:namespace />cmd:'changeLayout' 
      }, 
      error: function(){ 
      alert("AJAXError"); 
      }, 
      type: "post", 

      success: function(data) { 

       if("success" == data) { 

        location.reload(); 
       } 
      } 
     }).done(function(){ 
      exapndCollapse(); 
      }); 


    } catch(e) { 
     alert('waiting: ' + e); 
    } 
}; 

function expandCollapse() { 


      jQuery("div.Search_Styled-dropDown").css("display", "none"); 
      jQuery("span.menu-text").css("display", "none"); 

      jQuery("ul.Common_ul").css("display", "none"); 
      jQuery("img.module_images").css("width", "25px"); 
      jQuery("img.module_images").css("margin-top", "20px"); 
     jQuery("img.module_images").css("height", "21px"); 
      jQuery("#search_box").css("display", "none"); 
     jQuery("#Escaped_toggle").css("margin-right", "94%"); 
     } 
</script> 

Answer 1

Как вы знаете, Ajax, чтобы сделать асинхронный запрос. Это означает, что клиенту не нужно ждать, пока вы получите ответ от сервера. Таким образом, во время этого объекта Ajax переходит в разные состояния (от 0 до 4). Те, являются:

• 0: Запрос не инициализирован
• 1: соединение с сервером установлено
• 2: Запрос получен
• 3: Обработка запроса
• 4: запросить закончен и ответ готов

В соответствии с вашим требованием существует два решения:

• либо вы делаете синхронный запрос (но не рекомендуется)
• вам нужно вызвать свой 2-ой функции, когда readystate значение 4

См ниже код, это поможет вам:

function changeLayout() { 
    try{ 
     jQuery.ajax({ 
      url:'<%=resourceURL.toString()%>', 
      dataType: "text", 
      data:{ 
       <portlet:namespace />cmd:'changeLayout' 
      }, 
      type: "post", 

      beforeSend: function(){ 
       //before send this method will be called 
      }, 
      success: function(data) { 
       //when response recieved then this method will be called. 
      } 
      complete: function(){ 
       //after completed request then this method will be called. 
      }, 
      error: function(){ 
       //when error occurs then this method will be called. 
      } 
     }); 
    }catch (e) { 
     alert(e); 
    } 
} 

Надеется, что это поможет :)

Answer 2

Попробуйте это, но я создал пример изменения кода согласно вашему требованию

function exapndCollapse(){ 

    //execute your script here 
    //if u want reload the page means write your script here 

} 

function changeLayout() { 
var myval = 'test'; 
    $.ajax({ 
      url:'script.php', 
      type: "POST", 
      data: {"myval":myval}, 
      success: function(data){ 
       //call the after ajax success 
       exapndCollapse(); //whatever the function call 
      },error: function() { 
       console.log("error"); 
      } // This is always fired 
    }); 
};