jquery get json with timeout [duplicate]

StackOverflow https://stackoverflow.com/questions/23650480

  •  22-07-2023
  •  | 
  •  

سؤال

.This is the code of my java script.I want to add error and timeout to my function when calling json with ajax...how can i do that..i am new to this..plz help..i am stuck.. 

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link href="js/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/index.css"/> 
        <title>Hello World</title>

        <script type="text/javascript" src="phonegap.js"></script>

        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
        <script>
        $('#reposHome').bind('pageinit', function(event) {
            loadRepos();
        });

        function loadRepos() {
            $.ajax("https://api.github.com/legacy/repos/search/javascript").done(function(data) {
                var i, repo;
                $.each(data.repositories, function (i, repo) {
                    $("#allRepos").append("<li><a href='https://github.com/" + repo.username + "/" + repo.name + "'>"
                    + "<h4>" + repo.name + "</h4>"
                    + "<p>" + repo.username + "</p></a></li>");
                });
                $('#allRepos').listview('refresh');
                setTimeout(function(){
                    loadRepos();
                 }, 5000);
          })
          .fail(function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.statusText);
                 alert(xhr.responseText);
                 alert(xhr.status);
                 alert(thrownError);
            });

        }
        </script>
    </head>
    <body>
    <div data-role="page" id="pagetwo">

    <div data-role="header">

    <h1>My First page</h1>
    </div>
    <div data-role="main" class="ui-content">
    <p>Welcome to My page</p><br>

  <ul id="allRepos" data-role="listview"  data-filter="true">
        </ul>
    </div>
    <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

    </body>
</html>

Here i have also added the html part of my code..

هل كانت مفيدة؟

المحلول

You can add the fail mathod for executing you error block codes.

 function loadRepos() {
        $.ajax({
            url: "https://api.github.com/legacy/repos/search/javascript",
            timeout: 1000, //change it to any value you want in milliseconds
        })
        .done(function(data) {
            var i, repo;
            $.each(data.repositories, function (i, repo) {
                $("#allRepos").append("<li><a href='https://github.com/" + repo.username + "/" + repo.name + "'>"
                + "<h4>" + repo.name + "</h4>"
                + "<p>" + repo.username + "</p></a></li>");
            });
            $('#allRepos').listview('refresh');
            setTimeout(function(){
                  loadRepos();
               }, 300000);
        })
        .fail(function (xhr, textStatus, thrownError) {
               alert(xhr.statusText);
               alert(xhr.responseText);
               alert(xhr.status);
               alert(thrownError);
        });
}

نصائح أخرى

WORKING DEMO

Add dataType: 'jsonp' to your ajax object

Then, the payload returns you something like

"meta": {
    "X-RateLimit-Limit": "60",
    "X-RateLimit-Remaining": "58",
    "X-RateLimit-Reset": "1400066468",
    "Cache-Control": "public, max-age=60, s-maxage=60",
    "Vary": "Accept",
    "ETag": "\"4d8b8354d543d2739fd9dceb66f3b65e\"",
    "X-GitHub-Media-Type": "github.v3",
    "status": 200
  },
  "data": {
    "repositories": [
      {
        "type": "repo",
        "username": "airbnb",
        "name": "javascript",
        "owner": "airbnb",
        "homepage": null,
        "description": "JavaScript Style Guide",
        "language": "",
        "watchers": 9039,
        "followers": 9039,
        "forks": 1595,
        "size": 1694,
        "open_issues": 19,
        "score": 238.48807,
        "has_downloads": true,
        "has_issues": true,
        "has_wiki": true,
        "fork": false,
        "private": false,
        "url": "https://github.com/airbnb/javascript",
        "created": "2012-11-01T23:13:50Z",
        "created_at": "2012-11-01T23:13:50Z",
        "pushed_at": "2014-05-14T02:42:27Z",
        "pushed": "2014-05-14T02:42:27Z"
      },

So you can't just use data.repositories it should be payload.data.repositories

function loadRepos() {
        $.ajax({
            url: "https://api.github.com/legacy/repos/search/javascript",
            timeout: 5000,
          dataType: 'jsonp'

        })
        .done(function(payload) {
            var i, repo;
           $.each(payload.data.repositories, function (i, repo) {
                $("#allRepos").append("<li><a href='https://github.com/" + repo.username + "/" + repo.name + "'>" + "<h4>" + repo.name + "</h4>"+ "<p>" + repo.username + "</p></a></li>");
            });
            $('#allRepos').listview('refresh');

            setTimeout(function(){
                  loadRepos();
               }, 300000);
        })
        .fail(function (xhr, textStatus, thrownError) {
               alert(xhr.statusText);
               alert(xhr.responseText);
               alert(xhr.status);
               alert(thrownError);
        });
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top