在第一个终止之前停止第二个ajax调用

时间:2015-06-03 16:03:16

标签: javascript jquery ajax

$.ajax({
    method: "POST",
    //dataType: "json", //type of data
    crossDomain: true, //localhost purposes
    url: "./query/singlecourse.php", //Relative or absolute path to file.php file
    data: {id: i}, //passo i come parametro
    success: function(response) {
        var course=JSON.parse(response);
        var el1="";
        console.log(JSON.parse(response).length+" contenuti");
        el1="<br><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>"+course[0].title+"</p><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale {border-radius: 25px;   background-color: #d7dcfa;border: 4px solid #6e98f7;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><img src='http://hyp.altervista.org/images/courses/"+course[0].image+"'><br><br><br><p style='font-size:18px;line-height: 1;'>"+course[0].description+"</p></div>";   


        $instructorID=course[0].instructor;

        console.log($instructorID);
        $(".contenitore-dinamico").html(el1);

    },
    error: function(request,error)
    {
        console.log("Error");
    }
});
        console.log($instructorID);
 $.ajax({
    method: "POST",
    //dataType: "json", //type of data
    crossDomain: true, //localhost purposes
    url: "./query/singlecourse.php", //Relative or absolute path to file.php file
    data: {id: instructorID}, //passo instructor come parametro
    success: function(response) {
        var instructor=JSON.parse(response);
        var el1="";
        el1="<br><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale { background-color: #baa8ba;border: 2px solid #534053;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>Teacher of the course: "+instructor[0].name+" "+instructor[0].surname+"<img align='right' src='"+instructor[0].th_image+"'>";   
        $(".contenitore-dinamico").append(el1);

        console.log($instructorID);

    },
    error: function(request,error)
    {
        console.log("Error");
    }
});

}

我的问题是“Uncaught ReferenceError:$ instructorID未定义”导致第一个ajax调用在console.log之后工作。如何在ajax调用后暂停其余代码一段时间?没有setTimeout,如果可能的话......我试过但是很混乱。我希望只有在第一次ajax调用之后第二次启动。谢谢!

7 个答案:

答案 0 :(得分:0)

嵌套吗?

$.ajax({
    method: "POST",
    //dataType: "json", //type of data
    crossDomain: true, //localhost purposes
    url: "./query/singlecourse.php", //Relative or absolute path to file.php file
    data: {
        id: i
    }, //passo i come parametro
    success: function(response) {
        var course = JSON.parse(response);
        var el1 = "";
        console.log(JSON.parse(response).length + " contenuti");
        el1 = "<br><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>" + course[0].title + "</p><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale {border-radius: 25px;   background-color: #d7dcfa;border: 4px solid #6e98f7;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><img src='http://hyp.altervista.org/images/courses/" + course[0].image + "'><br><br><br><p style='font-size:18px;line-height: 1;'>" + course[0].description + "</p></div>";


        $instructorID = course[0].instructor;

        console.log($instructorID);
        $(".contenitore-dinamico").html(el1);
        getInstructor($instructorID);
    },
    error: function(request, error) {
        console.log("Error");
    }
});

function getInstructor($instructorId) {
    $.ajax({
        method: "POST",
        //dataType: "json", //type of data
        crossDomain: true, //localhost purposes
        url: "./query/singlecourse.php", //Relative or absolute path to file.php file
        data: {
            id: instructorID
        }, //passo instructor come parametro
        success: function(response) {
            var instructor = JSON.parse(response);
            var el1 = "";
            el1 = "<br><br><br><div class='contenitoreSpeciale'><style> .contenitoreSpeciale { background-color: #baa8ba;border: 2px solid #534053;    padding: 20px;     width: 90%; margin-left:5%;   height: auto}</style><p style='font-size:53px;line-height: 0.5;font-family: Gloria Hallelujah;'>Teacher of the course: " + instructor[0].name + " " + instructor[0].surname + "<img align='right' src='" + instructor[0].th_image + "'>";
            $(".contenitore-dinamico").append(el1);

            console.log($instructorID);

        },
        error: function(request, error) {
            console.log("Error");
        }
    });
}

答案 1 :(得分:0)

你应该把第二个ajax调用放在第一个成功回调中。然后第二个将在第一个成功完成后执行。在这种情况下,SetTimeout不是一个好的选择,因为您永远无法确定呼叫何时完成。

答案 2 :(得分:0)

添加属性

async: false 

在你的第一个ajax电话中 如果你这样做,它将一直持续到ajax呼叫完成。

答案 3 :(得分:0)

AJAX是异步功能,它运行非阻塞。在ajax函数中,添加属性&#34; async:false&#34;在你的第一个ajax功能。希望它能为您提供更多帮助

答案 4 :(得分:0)

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/cardList"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical" />

    </android.support.v4.widget.SwipeRefreshLayout>

你只需在第一次完成后执行第二次ajax调用(当成功函数触发时)

答案 5 :(得分:0)

或者您可以使用同步Ajax请求。将ajax async属性设置为false。

jQuery.ajax({
         async:   false
    });    

答案 6 :(得分:0)

你需要在第一个ajax成功函数中调用第二个ajax,如下所示,

//首先是ajax

success:function(response){   
  $.ajax({     
    //your code
  })
}