Question

我想在jQuery中进行每次迭代，并为每个我想要发出Ajax请求的值。 ajax的每个结果都应该逐个显示。所以不是一下子（在ajax-queries的最后）。对于content-array的每个值，ajax-request应该以相同的顺序输出一些数据（到html）。显示一些html数据后，应该触发下一个ajax请求。等等。

注释这不是关于这个例子中的文字数据（我知道这个数据/ httpstatus可以通过许多其他更简单的方式接收）。它是关于以内容数组的顺序/顺序动态逐个获取正确的html输出。

问题在下面的示例中（以及在http://www.heyhugo.nl/test/的实时预览中），每个ajax请求的结果将显示在html中，但序列已混合，并且不遵循内容数组的顺序（url＆＃） 39; S）

不需要的解决方案 ＆＃34; async：false＆＃34;在ajax-request中对我来说不是解决方案。这将立即显示所有结果。

我已经尝试过stackoverflow和jquery-docs的许多建议，但在做了很多天的研究之后我根本找不到解决方案。

谁可以帮助我和/或可以重写这个例子？

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="JavaScript">
        jQuery(document).ready(function() {
            var content = ['http://www.amazon.com','http://www.nu.nl','http://www.google.nl', 'http://www.google.de', 'http://www.google.com', 'http://www.google.fr'];

            $('#body').ready(function(){    // load function if body has loaded.
                $.fn.analyzeURLS(content);
            });

            $.fn.analyzeURLS = function(content) {
                $.each( content, function( key, value ) {
                    var URL = value;    // returns httpstatus for each url
                    $.when(
                        $.ajax({
                            type : "GET",
                            //async: false,
                            url : "checkurl.php",
                            dataType : "json",
                            data: { url : URL }
                        })
                        // the ajax request will return a json-string: {"httpstatus":"200"}
                    )
                    .then(function( data, textStatus, jqXHR)
                    {
                        httpstatus = data.httpstatus;   // SET httpstatus return from ajax request
                        var addDiv = '<div class="httpstatus">' + URL + ' - ' + httpstatus + '</div>'; // create div to append in html
                        $( "#results" ).append( addDiv );   // append div in html
                    })
                });
            }
        });
    </script>
</head>
<body>
    <div id="results"></div>
</body>
</html>

编辑：2014-08-05

我找到了上述问题的解决方案。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="JavaScript">

    jQuery(document).ready(function() {

        var content = ['http://www.amazon.com','http://www.nu.nl','http://www.google.nl', 'http://www.google.de', 'http://www.google.com', 'http://www.google.fr'];
        var content_length = content.length;

        // load function if body has loaded.
        $('#body').ready(function(){
            $.fn.analyzeURLajax(0);
        });

        $.fn.analyzeURLajax = function(key) {
            $.when(
                $.ajax({
                    type : "GET",
                    url : "checkurl.php",
                    dataType : "json",
                    data: { url : content[key] }
                })
            )
            .then(function( data, textStatus, jqXHR) 
            {
                var addDiv = '<div class="httpstatus">' + content[key] + ' - http-status:' + data.httpstatus + '</div>';
                $( "#results" ).append( addDiv );

                next_key = (key + 1);
                if(next_key < content_length) {
                    $.fn.analyzeURLajax(next_key);
                }
            })
        };
    });

    </script>
</head>
<body>
    <div id="results"></div>
</body>
</html>

Answer 1

问题是，不能保证AJAX请求会以任何顺序完成，毕竟它是异步的。你可以看到它有两个选项：而不是$.each()，按顺序激活AJAX调用（使content成为全局，记住密钥并将其发送到下一个）或者， AJAX调用等待，因此只有在插入前一个页面后，它们才会修改页面。（这将涉及显着修改代码，因此我选择显示选项1）。

选项1：

function parseQueryString(query) {
    var queries = query.split('&');
    var i,len,temp,params;
    params = [];
    for (i=0,len = queries.length;i<len;i++) {
        temp = queries[i].split('=');
        params[temp[0]]=temp[1];
    }
    return params;
}

$.fn.analyzeUrlsContent = array();
$.fn.analyzeURLS = function(content) {
            $.fn.analyzeUrlsContent = content;
            $.fn.analyzeURLajax(0); 
    };

$.fn.analyzeURLajax = function(key) {
     $.when(
             $.ajax({
                        type : "GET",
                        //async: false,
                        url : "checkurl.php",
                        dataType : "json",
                        data: { url : $.fn.analyzeUrlsContent[key],'key' : key}
                    })
                    // the ajax request will return a json-string: {"httpstatus":"200"}
             ).then(function( data, textStatus, jqXHR) {
                    httpstatus = data.httpstatus;   // SET httpstatus return from ajax request
                    var addDiv = '<div class="httpstatus">' + URL + ' - ' + httpstatus + '</div>'; // create div to append in html
                    $( "#results" ).append( addDiv );   // append div in html
                     var query = parseQueryString(this.data)
                     if(query.key < ($.fn.analyzeUrlsContent.length -1)) {
                         $.fn.analyzeURLajax(query.key+1);
                     }
            })
    };

以与每个循环相同的顺序逐个接收多个ajax请求

1 个答案: