AJAX执行错误

我有以下的js代码段：AJAX执行错误

cat_images = $(".category-description").next().find("img"); 
cat_images.each(function() { 
    url = $(this).parent().attr("href"); 
    id = url.split("id="); 
    id = id[1]; 
    url = "cat_url.php?i="+id; 
    this_image = this; 

    $.get (url, function (data) { 
     $(this_image).attr("src", data); 
    }); 
});

目前，只有最后一个元素遍历由每个回路是由ajax.get部分更新。我认为这是与ajax与循环相互作用差的事情，因为在ajax函数中使用this会使其完全失败。

无论如何，有没有在等待jquery完成jquery时延迟循环？（宁愿不混合常规JS）

来源

2012-10-26 tracer tong

这是因为'get'函数是非阻塞的（异步），这意味着'each'循环不会等待resp ONSE。当你从任何get调用得到响应时，你已经完成了迭代，'this_image'等于最后一个。请参阅以下Vega的答案，了解如何处理此问题。 – Archer

尝试它包裹封闭内，

cat_images.each(function() { 
    url = $(this).parent().attr("href"); 
    id = url.split("id="); 
    id = id[1]; 
    url = "cat_url.php?i="+id; 
    this_image = this; 

    (function (this_image) { 
     $.get (url, function (data) { 
     $(this_image).attr("src", data); 
     }); 
    })(this_image); 
});

来源

2012-10-26 16:13:14

欢呼！从我甚至考虑过使用js封闭开始，这个时代已经过去了 - 我永远不会想到。 –

我最初的想法是使用闭包，然后我认为我可能会过度思考:(。+1 –

另一种方法是使用$ .ajax并将this_image作为上下文 –

看来虽然Vega的解决方案正常工作，我建议你改变你的逻辑有点。

问题是，如果你有10个cat_images，你会做出10个不同的请求，这不是很优雅。

您应该考虑创建一个新的cat_url.php，它将接收一个或多个ID并且一次返回所有的URL。你也可以将html里面的图像标识为cat_image，所以当你将URL作为JSON返回时，你可以设置每个src。

你的HTML代码段应该是这样的：

<a href="url?id=1"> 
    <img src="..." id="cat_image1" rel="1" /> 
</a>

这将是你最后的js代码片段：

var ids = []; 
cat_images.each(function() { 
    ids.push($(this).attr("rel")); 
}); 

var data = "ids=" + ids; 
$.get ({ 
    url: url, 
    data: data, 
    dataType: 'json', 
    success: function (data) { 
    for (var img in data.images) { 
     $("#cat_image" + img.id).attr("src", img.url); 
    }; 
    } 
});

你cat_images.php应该返回JSON这样的：

{ 
    images: [ 
    {id: 1, url: 'url1.jpg'}, 
    {id: 2, url: 'url2.jpg'}, 
    {id: 3, url: 'url3.jpg'} 
    ] 
}

来源

2012-10-26 18:40:57

回答

相关问题