Question

var arr = ['test1','test2'];
var url = ['/test1/','/test2/'];
arr.forEach(function(item, i, arr){
                //alert( i + ": " + item + " (arr:" + arr + ")" );
                var obj = arr[i];
                $.ajax({
                    url: url[i],
                    data: {val:"test"},
                    //dataType: 'json',
                    type: 'post',
                    success: function(data) {
                        $(obj).html('').html(data);
                        $(obj).trigger("chosen:updated");
                    },
                    error: function() {}
                });

            });

我们遇到问题 - 当我们使用脚本fisrt cyrcly未将数据加载到obj时，我们发现数据仅在第二个obj中加载。如果我们在第一个和第二个alert( i + ": " + item + " (arr:" + arr + ")" );中取消注释obj数据加载。

我们认为当第二个ajax发送时，第一个对象丢失，脚本无法看到名字obj（arr [i]）并且无法将数据加载到元素。

任何人都知道如何修复它？

P.S。：如果您认为这个问题不好，我们很抱歉，但我们无法找到相关信息。

Answer 1

您在ajax调用之外分配obj，因此当第一个调用返回时，它会查找被指定为第二个项目的obj。请尝试以下方法：

$.ajax({
    url: url[i],
    data: {val:"test"},
    //dataType: 'json',
    type: 'post',
    success: function(data) {
        $(item).html('').html(data);
        $(item).trigger("chosen:updated");
    },
    error: function() {}
});

Answer 2

Ajax调用是异步的，因此在外部创建的变量可能会发生变化。在这种情况下，我建议您将这些变量绑定到将调用$.ajax的函数。此外，我使用了对象而不是两个数组，在我看来，这是一个更优雅和更强大的解决方案

var obj = {'test1':'/test1/','test2':'/test2/','test3':'/test3/'};
for (key in obj) {
    (function(key,obj){
        $.ajax({
            url: obj[key],
            data: {val:"test"},
            type: 'post',
            success: function(data) {
                // Suppose the key will be an id (e.g. #test1)
                $('#'+key).html(data);

                // I still don't understand what this stands for..
                $('#'+key).trigger("chosen:updated");
            },
            error: function() {}
        });
    })(key,obj);
}

Answer 3

使用ajax context参数允许通过成功函数中的 this 引用当前项。使用console.log而不是alert不会在调试时阻止代码流。使用$ .each优于forEach，因为它可以通过返回false / true（需要时）来模仿本机 for 循环的中断/继续功能。

注意：item.obj应该是一个jquery选择器，否则这种用法没有意义：$('test1')

var arr = [
    { url: '/test1/', obj: 'test1' },
    { url: '/test2/', obj: 'test2' }
];
$.each(arr, function (i, item) {
    console.log(i, item);
    $.ajax({
        url: item.url,
        data: {val:"test"},
        //dataType: 'json',
        type: 'post',
        context: item,
        success: function(data) {
            $(this.obj).html(data).trigger("chosen:updated");
        },
        error: function() {}
    });
});

如何在所有元素中加载数据？

3 个答案: