Jquery ajax 函数里面 Jquery 每个函数答案

【问题标题】：Jquery ajax function in side Jquery each functionJquery ajax 函数里面 Jquery 每个函数
【发布时间】：2012-07-09 10:07:25
【问题描述】：

我有以下代码：

$(document).ready(function () {

        $('div.env').each(function (index, item) {

            var vm = $(item).text();
            alert(vm);
            var url = "http://localhost:56656/HTML" + vm + ".htm";
            alert(url);
            $.ajax(url, {
                type: "GET",
                dataType: "html",
                success: function (data) {
                    alert("Colouring");
                    var style = $(data).filter('div').attr('style');
                    var styleObj = {};
                    $.each(style.split(';'), function () {
                        var rule = this.split(':');
                        styleObj[$.trim(rule[0])] = $.trim(rule[1]);
                    });

                    $(item).css('background', styleObj.background);

                },
                error: function () {
                    alert("Error");
                    $('div').css('background', '#f00');
                }
            });

        });

问题是在执行 Ajax 函数之前，我对 div 类“env”中的每个值都有一个警报。

我想要的是，对于每个 div，获取值，执行 ajax，获取下一个值。似乎 ajax 完全在最后执行。

任何帮助表示赞赏，谢谢。

【问题讨论】：

我不确定你的意思。您是说您希望对每个 AJAX 调用都等待前一个 AJAX 调用完成后再执行吗？

标签： jquery ajax

【解决方案1】：

默认情况下，Ajax 调用是异步的，因此您的循环将继续执行，并且很可能在第一次 ajax 调用完成之前完成。

说实话，在循环中进行 ajax 调用似乎不是一个好方法 - 如果我是你，我会尝试不同的方法。

【讨论】：

【解决方案2】：

这就是您已经使用的回调函数的全部意义所在。他们在查询完成时被调用，例如

$.ajax(url, {
    type: "GET",
    dataType: "html",
    success: function (data) {
        /* this code will be run when the query is complete */
    },
    error: function () {
        /* this code will be run when the query fails */
    }
});

试试这样的：

$(document).ready(function () {

        $('div.env').each(function (index, item) {


            $.ajax(url, {
                type: "GET",
                dataType: "html",
                success: function (data) {
                    alert("Colouring");
                    var style = $(data).filter('div').attr('style');
                    var styleObj = {};
                    $.each(style.split(';'), function () {
                        var rule = this.split(':');
                        styleObj[$.trim(rule[0])] = $.trim(rule[1]);
                    });

                    $(item).css('background', styleObj.background);

                    var vm = $(item).text();
                    alert(vm);
                    var url = "http://localhost:56656/HTML" + vm + ".htm";
                    alert(url);

                },
                error: function () {
                    alert("Error");
                    $('div').css('background', '#f00');
                }
            });

        });

【讨论】：

【解决方案3】：

在您的 ajax 调用上设置 async: false。它会更慢，但它会做你想做的事。

参考资料：

【讨论】：