检查网址是否存在使用jQuery / AJAX [英] Checking url exists with jquery/ajax

问题描述

这有我完全糊涂了。我试图通过一系列的Youtube ID的运行检查，如果视频仍然存在。

我在阵列中的所有ID和要检查的gdata的API来看看，如果我得到XML结果或视频没有发现404的消息。

我发现了一个功能上的SO检查每个ID和行添加到表中。

  VAR ytarray = ARRAY YOUTUBE的IDS
VAR yttitles =阵列相匹配名称的VIDS的
VAR urlExists =功能（URL，回调）{
$阿贾克斯（{
            类型：'头'，
            网址：网址，
            成功：函数（）{
                回调（真正的）;
            }，
            错误：函数（）{
                回调（假）;
            }
        }）;

    }
    VAR长度= ytarray.length，
    对于（VAR I = 0; I＆LT;长度;我++）{
    urlExists（'http://gdata.youtube.com/feeds/api/videos/'ytarray [I]中，功能（成功）{
        如果（成功）{
              $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td风格=颜色：绿色和计算值：LT; / TD＆GT;＆LT; / TR＆GT;'）;
        } 其他 {
              $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td风格=颜色：红色＆GT;未发现＆LT; / TD＆GT;＆LT; / TR＆GT;'）;
        }
    }）;
    };
}）;
}）;
 

表填写但所有的行所包含的信息的最后的视频不每一个作为它通过循环。

测试与警报似乎表没有得到填补，直到所有的for循环已完成。

我不知道这是否是与我不处理AJAX的异步特性是否正确？

解决方案

  VAR ytarray = [YOUTUBE的ID阵列]，
    yttitles = [矩阵匹配的标题作VIDS的]
    urlExists =功能（URL）{
        返回$阿贾克斯（{
            类型：'头'，
            URL：
        }）;
    }，
    输出=功能（状态，我）{
        VAR TR = $（'＆LT; TR /＆GT;'），
            TD1 = $（'＆LT; TD /＆GT;'，{文字：yttitles [I]}），
            TD2 = $（'＆LT; TD /＆GT;'，{文字：ytarray [I]}），
            TD3 = $（'＆LT; TD /＆GT;'，{文字：国家发现：未找到，
                               风格：状态呢？ 颜色：绿色：颜色：红色'}）;

        $（'＃行）追加（tr.append（TD1，TD2，TD3））。
    }，
    长度= ytarray.length;

对于（VAR I = 0; I＆LT;长度;我++）{
    （函数（K）{
        urlExists（'http://gdata.youtube.com/feeds/api/videos/'+ ytarray [k]的）
           .done（函数（）{
             输出（真，K）;
           }），失败（函数（）{
                输出（假，K）;
        }）;
    }）（一世）;
}
 

花了一些时间来弄明白，但你会需要一些关闭，并处理异步行为以不同的方式。

This has me totally confused. I'm trying to run through a series of Youtube ids to check if the videos still exist.

I have all the ids in an array and want to check the gdata api to see if I get XML results or a Video not found 404 message.

I found a function on SO to check each id and add a row to a table.

var ytarray = ARRAY OF YOUTUBE IDs
var yttitles = ARRAY OF MATCHING TITLES FOR THE VIDS
var urlExists = function(url, callback){
$.ajax({
            type: 'HEAD',
            url: url,
            success: function() {
                callback(true);
            },
            error: function() {
                callback(false);
            }            
        });

    }
    var length = ytarray.length,
    for (var i = 0; i < length; i++) {
    urlExists('http://gdata.youtube.com/feeds/api/videos/'ytarray[i], function(success) {
        if (success) {
              $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td style="color: green">Found</td></tr>');
        } else {
              $('#rows').append('<tr><td>'+yttitles[i]+'</td><td>'+ytarray[i]+'</td><td style="color: red">Not Found</td></tr>');
        }
    });
    };
});
});

The table fills out but all of the rows contain the information for the last video not each one as it goes through the loop.

Testing with alerts it seems the table doesn't get filled out until all the for loops have completed.

I wonder if this is something to do with me not handling the asynchronous nature of AJAX correctly?

解决方案

var ytarray   = ["ARRAY OF YOUTUBE IDs"],
    yttitles  = ["ARRAY OF MATCHING TITLES FOR THE VIDS"],
    urlExists = function(url){
        return $.ajax({
            type: 'HEAD',
            url : url
        });
    },
    output = function(state, i) {
        var tr  = $('<tr />'),
            td1 = $('<td />', {text : yttitles[i]}),
            td2 = $('<td />', {text : ytarray[i]}),
            td3 = $('<td />', {text : state ? 'Found' : 'Not found', 
                               style: state ? 'color: green' : 'color:red'});

        $('#rows').append( tr.append(td1, td2, td3) );
    },
    length = ytarray.length;

for (var i = 0; i < length; i++) {
    (function(k) {
        urlExists('http://gdata.youtube.com/feeds/api/videos/' + ytarray[k])
           .done(function() {
             output(true, k);
           }).fail(function() {
                output(false, k);
        });
    })(i);
}

Took some time to figure it out, but you'll need some closures, and a different way of handling the asynchronous behaviour.

这篇关于检查网址是否存在使用jQuery / AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！