AjaxでURLをチェックしてイベントを発生させる方法

私は複数のURLをチェックする必要のあるurlCheckerツールを開発中です。すべてのURLがUPの場合は、画像が緑色に変わり、URLのいずれかがダウンしている場合は赤色に変わります。以下は私のコードですが、何が間違っているのか分かりません。すべてのURLをチェックしますが、URLのいずれかがダウンしていると赤いイメージを表示できませんでした。Ajaxで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>

ありがとうございます。

出典

2017-11-10 Pankaj_Dwivedi

これを試してみてください。 – camelsWriteInCamelCase

@camelsWriteInCamelCaseこんにちは私は自分のコードを編集し、htmlを追加しました。ありがとう –

こんにちはあなたは、スニペットとしてJSとHTMLの両方をあなたのコードをポストする必要があり

$(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") 
     } 
    } 

});

出典

2017-11-10 08:40:20

こんにちは、どこかに近いです。いずれかのURLがダウンしていても、すべてのURLがアップしていればうまくいきません。すべてのURLがUPしていれば、緑のイメージが表示されません。 if（！success）{url flag = 1;そうでなければurl_flag = 0でsetImage funを呼び出します。私はこれが好きで、それはすべての人のために働いた。 –

@Pankaj_Dwivediが投稿を編集しました。準備が整った関数の中に緑色の画像をデフォルトとして設定し、URLのいずれかがfalseを返した場合にのみ画像を更新します –

は、[OK]をする必要があり：

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);

出典

2017-11-10 05:14:48 pirs

あなたはどこかで構文エラーがありますが、これもうまくいくはずです。 –

引数リストの後ろに "）" –

はい修正しました – pirs

AjaxでURLをチェックしてイベントを発生させる方法

答えて

関連する問題