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

时间:2015-03-27 05:30:14

标签: javascript jquery html css liferay

我有两个函数,第一个函数有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>

2 个答案:

答案 0 :(得分:4)

如您所知,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);
    }
}

希望这会对你有所帮助:)。

答案 1 :(得分: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
   });   
};