0

我有以下代码：

$(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 是在最后完全执行的。

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

4

3 回答 3

0

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

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

于 2012-07-09T10:12:20.510 回答
0

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

$.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');
                }
            });

        });
于 2012-07-09T10:12:39.310 回答
0

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

参考：

于 2012-07-09T10:15:36.607 回答