Question

我目前正致力于使用AJAX的功能，但在这种情况下，它使用多个可选嵌套的ajax请求。在ajax请求成功之后，我似乎无法找出执行重定向的最佳方法。所以想法是运行主ajax请求并在success函数中调用其他ajax函数。请记住，嵌套的ajax请求是可选的。

        $.ajax
            ({
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 data: "{'articleName':'" + webName + "', 'title':'" + titleContent + "', 'body':'" + content + "', 'categoryID':'" + $('.js-category-select').val() + "'}",
                 dataType: "json",
                 url: "/internal-service/service.asmx/EditBlogPost",
                                success: (function (data)
                                {
                                    var returnVal = data.d;

                                    //Is there extensions
                                    if ($("[data-blog-type-id]").length > 0)
                                    {
                                        var extensionAry = [];

                                        $("[data-blog-type-id]").each(function ()
                                        {
                                            if ($(this).val() != "")
                                            {
                                                extensionAry.push($(this).attr("data-f-name") + "|" + $(this).val());
                                            }
                                        });

                                        //Must be bookReview field extensions
                                        //send array (if has value)
                                        if (extensionAry.length > 0)
                                        {
                                            $.ajax
                                                ({
                                                    type: "POST",
                                                    contentType: "application/json; charset=utf-8",
                                                    data: JSON.stringify({ articleWebname: webName, extensionAry: extensionAry }),
                                                    dataType: "json",
                                                    url: "/internal-service/service.asmx/EditBlogExtensions",
                                                    success: (function (data)
                                                    {
                                                       alert(data.d);
                                                    }),
                                                    error: (function ()
                                                    {
                                                        //error
                                                        alert("ERROR!");
                                                    })
                                                });
                                        }

                                    }

                                    //Has Rating extension
                                    if ($(".js-rating").length > 0)
                                    {
                                        var ratingVal = $(".js-rating").val();
                                        $.ajax
                                            ({
                                                type: "POST",
                                                contentType: "application/json; charset=utf-8",
                                                data: JSON.stringify({ articleWebname: webName, rating: ratingVal }),
                                                dataType: "json",
                                                url: "/internal-service/service.asmx/EditBlogRating",
                                                success: (function (data)
                                                {
                                                    alert(data.d);
                                                }),
                                                error: (function () {
                                                    //error
                                                    alert("ERROR!");
                                                })
                                            });
                                    }

                                    if (returnVal != "Error updating blog post")
                                    {
                                        //Return the path of the article just in case the title has been changed. page uses the title to locate the article on the server
                                        alert(returnVal + " Good job!");
                                    }
                                    else
                                    {
                                        alert(returnVal);
                                    }
                                }),
                                error: (function () {
                                    //error
                                    alert("ERROR!");
                                })
                            });

在后端（C＃），它是一个可插拔系统，我可以创建一个应用程序，然后我可以安装一个博客，而博客又有不同博客类型的扩展。博客系统还可以有额外的插件I.E评级插件。

AJAX似乎令人担忧，可能会遇到可扩展性问题。任何想法都非常感激。

所以问题是，如果调用了可选的嵌套AJAX请求，我如何等待它们完成然后重定向（将重定向到同一页面）？

Answer 1

使用jQuery promises简化代码。

将每个加载的代码分解为单独的函数，每个函数都返回它们的Ajax承诺。

e.g。

    function PostBlah() {
        return $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: "{'articleName':'" + webName + "', 'title':'" + titleContent + "', 'body':'" + content + "', 'categoryID':'" + $('.js-category-select').val() + "'}",
            dataType: "json",
            url: "/internal-service/service.asmx/EditBlogPost"
        });
    }

然后，您可以使用then或done对来电进行链接，或者与$.when并行运行。

     postBlah().then(function(dataFromPostBlah){
         step2(dataFromPostBlah).then(function(dataFromStep2){
             // etc
         });
     });

这将使顶级代码更加简单。查看jQuery承诺以获取更多详细信息。

要传递复杂结果，请使用$.Deferred()创建一个可以使用您自己的其他数据解决的特定承诺。

e.g。

function DoMore(parameter){
    var def = $.Deferred();
    // Do some stuff asynchronously
        // When you get a result back later - resolve the promise
        def.resolve(myComplicatedData);
    // return a promise to return some complicated data later
    return def.promise();
}

这是一个通用的JSFiddle承诺测试平台，我把它放在一起来演示基本的承诺逻辑（让你玩选项）：

JSFiddle： http://jsfiddle.net/TrueBlueAussie/nexpe8pt/2/

所有嵌套的AJAX请求成功后重定向

1 个答案: