Jquery -在ajax函数中调用ajax函数

Question

我可以在ajax函数中使用ajax函数吗？

在我的例子中，有两个ajax调用。第一个ajax将返回一些数据，如果成功，则应该调用第二个ajax。

下面是我的代码片段，

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async: false,
    url: "my service url here"
    dataType = "json",

    //success - 1
    success: function(data) {

        //I ll collect the data from service 
        //now the second ajax must run.
        //Because in first call I ll receive some data 
        //That data I going to use in my second call   
        $.ajax({
                alert('inside ajax-2');
                type: "GET",
                    contentType: "application/json; charset=utf-8",
                    async: false,
                    url: "my second service URL here",
                    dataType: "json",

                    //success - 2
                    success: function(data) {

                        //some functionality 

                    } //success-2
            } //success-1
        }); //ajax - 2
}); //ajax - 1 

更多信息:我已经检查了chrome dev控制台，我得到的错误是

//success - 1
success: function(data) {
   //Error message : Uncaught SyntaxError: Unexpected identifier

这就是我收到的错误消息。

是的，我清除了语法错误，并且收到了相同的错误消息。

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
async: false,
url: "my service url here",
dataType : "json"

//success - 1
success: function(data) {

    //I ll collect the data from service 
    //now the second ajax must run.
    //Because in first call I ll receive some data 
    //That data I going to use in my second call   
    $.ajax({
            alert('inside ajax-2');
            type: "GET",
                contentType: "application/json; charset=utf-8",
                async: false,
                url: "my second service URL here",
                dataType: "json",

                //success - 2
                success: function(data) {

                    //some functionality 

                } //success-2
        } //success-1
    }); //ajax - 2
}); //ajax - 1 

我检查了firefox浏览器的RESTClient扩展中的服务URL，再次确认，有来自该服务的Jsondata。

任何好的建议都会受到高度赞赏。

圣诞快乐:)

Answer 1

您的脚本中有一些错误。

在第一个ajax调用中，用逗号分隔成员的位置在哪里？

url:"my service url here",
dataType= "json",

这应该是：

dataType : "json",

回到你的回答，是的，你可以，但是，如果你有第三个ajax调用呢？

你的代码会一团糟，真的很难读懂。

最好的方法是使用promises。

这是在javascript中使用异步的最好方法(这也是我注释你的async:false的原因)。

你可以阅读promises是如何工作的here。

$.ajax已经返回一个promise：

var promise = $.ajax({
       type: "POST",
       contentType: "application/json; charset=utf-8",
       url:"my service url here",
       dataType: "json",
    });

可以与另一个链接在一起：

promise.then(function(result){ });

我倾向于将ajax调用拆分到不同的函数中，这些函数创建一个新的promise并返回它；以防我想要操作结果：

您可以拆分这两个ajax调用：

function FirstAjaxCall()
{
    var deferred = $.Deferred();

    $.ajax({
       type: "POST",
       contentType: "application/json; charset=utf-8",
       // async : false,
       url:"my service url here",
       dataType: "json",
       success: function (jsonData) {
           deferred.resolve(jsonData);
       },
       error: function (req, status, error) {
           var errorMessage = (error.message) ? error.message : error;
           deferred.reject(errorMessage);
       }
    });

    return deferred.promise();

}

和

function SecondAjaxCall()
{
    var deferred = $.Deferred();

    $.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       // async:false,
       url: "my second service URL here",
       dataType: "json",
       success: function (jsonData) {
            deferred.resolve(jsonData);
       },
       error: function (req, status, error) {
            var errorMessage = (error.message) ? error.message : error;
            deferred.reject(errorMessage);
        }
    });

    return deferred.promise();

}

现在您可以解析第一个，并链接第二个：

FirstAjaxCall()
    .then(function(result){
        return SecondAjaxCall(result);
    })
    .then(function(result){
        // final result
    })
    .fail(function(reason){
        // reason should contain the error.
    });

如您所见，FirstAjaxCall()是在.then()分支中解析的，它将其结果传递给匿名函数。第二个ajax调用SecondAjaxCall()也会发生同样的事情。如果在第一次或第二次调用中失败，错误会被捕获到这里：

.fail(function(reason){
     // reason should contain the error.
 });

promises的美妙之处在于您可以在parallel中链接或执行它们。

Answer 2

是的你可以。

我可以看到你的代码中有一些错误，}//success-1在});//ajax - 2之前，它应该在后面。

在url:"my service url here"之后还有一个丢失的昏迷( ,)，

将两个dataTypes的'=‘替换为':’。

您应该更正此错误，然后重试。

Answer 3

以结构化的方式尝试下面这样的东西：

//First method with callback
function myFirstCall(callback) {
    $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async:false,
    url:"my service url here",
    dataType= "json",
    success:function(data){
       callback();
    });
}

// Second method
function mySecondCall() {
    $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    async:false,
    url:"my second service url here",
    dataType= "json",
    success:function(data){
    });
}

//Let's trigger it
myFirstCall(function() {
  mySecondCall();
});