javascript - 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:请求完成，响应准备就绪

因此，根据您的要求，有两种解决方案:

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

希望这对你有帮助:)