Question

我正在开发一个urlChecker工具，我需要检查多个网址。如果所有网址都已启用，则图片应更改为绿色，如果任何网址已关闭，则图片应更改为红色。以下是我的代码，不知道其中出了什么问题。它检查所有URL，但如果任何URL关闭，则无法显示红色图像。

<html>
<head>
<script src="jquery-3.2.1.js"></script>
<script> 
    var urlArray = Array();
    urlArray[0] = 'http://google.com';
    urlArray[1] = 'm';
    urlArray[2] = 'http://apple.com';

    $(function() {
        for (var i = 0; i < urlArray.length; i++) {
            urlcheck(i);
        }
    })

    function urlcheck(i) {
        var url1 = urlArray[i];


        $(document).ready(function() {

            var urlExists = function(url, callback) {
                $.ajax({
                    type: 'HEAD',
                    url: url,
                    success: function() {
                        callback(true);
                    },
                    error: function() {
                        callback(false);
                    }
                });
            }

            urlExists(url1, function(success) {
                if (success) {
                    //alert('Success!');
                    $("#theImg").attr("src", "images/green.png")

                } else {
                    //alert('Down!');
                    $("#theImg").attr("src", "images/red.png")
                }
            });
        });
    }
</script>

</head>

<body>


 <form name=form01>

            <td style="height: 60px;; width: 75px"><IMG 
                ID="theImg" border="0" src="images/wait.png" width="40"
                height="40"></IMG></td>
            </form>
</body>

</html>

感谢。

Answer 1

应该没问题：

var urlArray = Array();
urlArray[0] = 'http://google.com';
urlArray[1] = 'm';
urlArray[2] = 'http://apple.com';

function handler(status){
   var img = '';
   if(!!status){
     img = "images/green.png";
   }else{
     img = "images/red.png";
   }
   $("#theImg").attr("src",img);
}

function checkUrls (arr) {
    var len = arr.length;
    urlArray.map(function (url) {
       ping(url)
       .done(function(){
           if(--len === 0) handler(true);
       })
       .fail(function(){
           handler(false);
       })
    })
}

function ping (url) {
    return $.ajax({ 
      type: "HEAD",
      url: url,
      cache:false
    })
}

checkUrls(urlArray);

Answer 2

嗨，请试一试

$(function () {
    var urlArray = Array();
    urlArray[0] = 'http://google.com';
    urlArray[1] = 'http://m';
    urlArray[2] = 'http://apple.com';
    var url_flag = 0;

    $(function () {
        for (var i = 0; i < urlArray.length; i++) {
            urlcheck(i);
        }
    })

    function urlcheck(i) {
        var url1 = urlArray[i];

        $(document).ready(function () {
           //Set the green image as default
           $("#theImg").attr("src", "images/green.png")

            var urlExists = function (url, callback) {
                $.ajax({
                    type: 'HEAD', url: url, success: function () {
                        callback(true);
                    },
                    error: function () {
                        callback(false);
                    }
                });
            }

            urlExists(url1, function (success) {
                if (!success) {
                    url_flag = 1;

                    setImage(url_flag);
                }

            });

        });
    }

    function setImage(url_flag){
        if (url_flag == 1) {
            $("#theImg").attr("src", "http://s1.thingpic.com/images/2T/1SL9eAWko9U1ZhnPvMvAzvw2.png")
        }
    }

});

如何检查Ajax中的URL然后触发事件

2 个答案: