PHP、jQuery 和 Ajax 调用乱序

Question

我正在使用 jQuery 进行 Ajax 调用...我有 x 数量的 Ajax 调用附加到 div。这些 Ajax 加载请求是由 PHP foreach 循环生成的...问题是它们渲染的顺序不正确；它们被设置在数组中...

<script type="text/javascript">
function loadPage(target, url, append)
{
    if (append == true) {
        $.get(url, function(data) { $(target).append(data) });
    }
    else {
        $(target).load(url);
    }
    return false;
}
</script>

//////----- PHP

<?php
    $this->data['sidebar']  = array('login', 'active_leagues', 'latest_forum_threads', 'latest_matches', 'sponsors');

    if (isset($sidebar[0]) && !empty($sidebar[0]))
    {
        echo '<div class="right_col">';
        foreach($sidebar as $val)
        {
            echo "<script>loadPage('.right_col', 'http://dev.banelingnest.com/sidebar/". $val ."', true)</script>";
        }
        echo '</div>';
    }

我想知道造成这种情况的原因是否是网络服务器对某些请求的响应速度比其他请求慢......除此之外，我不知道为什么会发生这种情况。您有什么想法我可以如何保持请求的顺序吗？

Answer 1

您必须在请求之前创建引用点，并将结果附加到它们:

var counter = 0;

function loadPage(target,url,append)
{
    if (append == true) {
        var id = "container_"+counter;
        $(target).append("<div id='"+id+"'></div>")
        $.get(url, function(data) { 
            $("#"+id).append(data);
        });
        counter++;
    } else {
        $(target).load(url);
    }

    return false;
}

您的引用元素将在每次 loadPage() 调用时附加到目标，因此它们将按正确的顺序排列，并且请求可以按它们将按正确顺序加载的任何顺序出现地点。