2016-04-27 21 views
-1

首先,我能夠收到JSON文件,但做了一些事情後,我不記得我收到JSON文件時出現錯誤。獲取JSON文件工作了一段時間,但之後不再工作

我得到在輸入的值,然後調用一個url,接收這個JSON文件,然後解析它到表中。

當我收到錯誤消息

function getPokemon() { 
 
    var Value = $("#intvalue").val(); 
 
    var url = "http://pokeapi.co/api/v2/pokemon/" + Value + "/"; 
 
    //alert(url);  
 
    $.ajax({ 
 
    type: 'GET', 
 
    url: url, 
 
    //force to handle it as text 
 
    dataType: 'text', 
 
    success: function(data) { 
 
     //data downloaded so we call parseJSON function 
 
     //and pass downloaded data 
 
     var json = $.parseJSON(data); 
 
     //now json variable contains data in json format 
 
     //let's display a few items 
 
     $('#ID').html(json.id); 
 
     $('#name').html(json.name); 
 
     $('#Experience').html(json.base_experience); 
 
     $('#Height').html(json.height); 
 
     $('#Weight').html(json.weight); 
 
     $('#numAbility').html(json.abilities.length); 
 
    }, 
 
    error: function() { 
 
     alert("Unable to retreive JSON file"); 
 
     //console.log(data); 
 

 
    } 
 
    }); 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <title>Pokedex Search</title> 
 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 
 
    <link href="dashboard.css" rel="stylesheet"> 
 

 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 
 

 

 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html#">Pokedex</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <form class="navbar-form navbar-right"> 
 
      <input id="intvalue" type="text" class="form-control" placeholder="Enter a number between 1 and 100 to Search for your Pokemon..." style="width:800px"> 
 
      <button class="btn btn-primary" onclick="getPokemon()">SEARCH</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-3 col-md-2 sidebar"> 
 
     <ul class="nav nav-sidebar"> 
 
      <li class="active"><a href="index.html#">Overview <span class="sr-only">(current)</span></a> 
 
      </li> 
 

 
     </ul> 
 

 
     </div> 
 
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
 
     <h1 class="page-header">Dashboard</h1> 
 

 
     <div class="row placeholders"> 
 
      <div class="col-xs-6 col-sm-3 placeholder"> 
 
      <img src="Pokémon_logo.png" width="1000" height="200" alt="Generic placeholder thumbnail"> 
 
      </div> 
 
     </div> 
 

 
     <h2 class="sub-header">Pokedox Search</h2> 
 
     <div class="table-responsive"> 
 
      <table class="table table-striped"> 
 
      <thead> 
 
       <tr> 
 
       <th>#</th> 
 
       <th>Name</th> 
 
       <th>Experience</th> 
 
       <th>Height</th> 
 
       <th>Weight</th> 
 
       <th>Number of Abilities</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td id="ID"></td> 
 
       <td id="name"></td> 
 
       <td id="Experience"></td> 
 
       <td id="Height"></td> 
 
       <td id="Weight"></td> 
 
       <td id="numAbility"></td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script> 
 
    window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>') 
 
    </script> 
 
    <script src="../../dist/js/bootstrap.min.js"></script> 
 
    <script src="../../assets/js/vendor/holder.min.js"></script> 
 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
 
</body> 
 

 
</html>

+0

爲什麼失敗?不知道爲什麼它會失敗,沒有人可以幫助你,而不是野蠻的猜測。改進你的錯誤處理程序並觀看控制檯/網絡選項卡。 –

+0

原來,一個簡單的async:false修復了它,至於自動重新加載頁面,我通過刪除圍繞按鈕和輸入的

來修復它,並且像一個提交按鈕。 –

+0

這不是解決ajax問題的一個很好的方法(除了導致瀏覽器暫時停頓之外,應該對給定的代碼沒有任何影響)。 –

回答

-1

改變的dataType文字JSON(數據類型: 'JSON')嘗試一次之後,頁面重新加載也

+0

它是'application/json'而不是'json'。但是,如果將腳本標籤替換爲html頭部,這也會有所幫助。 –

+0

謝謝你的回覆,但它沒有工作 –

+0

@ H.Pauwelyn不應該,它應該是'json',而不是'application/json' –

相關問題