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：请求已完成且响应已准备就绪

根据您的要求，有两种解决方案：

要么发出同步请求（但不推荐）
当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
   });   
};

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

2 个答案: