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

试试这个，但我已经创建了示例，根据您的要求更改代码

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

Answer 2

如你所知，Ajax是进行异步请求。这意味着客户端无需等到您收到服务器的响应。 因此在此 Ajax 期间对象进入不同状态（即从 0 到 4）。它们是：

0：请求未初始化
1：已建立服务器连接
2：收到请求
3：处理请求
4：请求完成，响应准备就绪

所以根据你的要求有两个解决方案：

要么你做同步请求（但不推荐）
当就绪状态值为 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);
    }
}

希望这对您有所帮助:)

Ajax 调用完成后如何执行函数

How to Execute the function after Ajax call is complete

html

javascript

css

jquery

liferay