Json.data沒有加載/正確顯示

我想加載我的data.json文件，所以我可以顯示文本，當我點擊按鈕。我對JQuery的奇觀很陌生，因此我很難理解如何正確執行此操作。Json.data沒有加載/正確顯示

這是我的json文件，我試圖加載我的json.data的HTML部分。你可以看到我已經試圖將json.data加載到html中，但是當我這樣做時，沒有任何顯示，而且我不知道如何包裝這個，想要實現this, but whit loading data.json into html。所以有人可以幫我解決這個問題。

[ 
    { 
     "all": { 
      "id": "all", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "cover": { 
      "id": "cover", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "diy": { 
      "id": "diy", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "marketing": { 
      "id": "marketing", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "other": { 
      "id": "other", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "special": { 
      "id": "special", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "vip": { 
      "id": "vip", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     }, 
     "design": { 
      "id": "design", 
      "data": { 
       "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
      } 
     } 
    } 
]

HTML的一部分：在HTML的其餘部分已經完成渲染之前

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang=""> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 



     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
     <link rel="stylesheet" href="css/bootstrap-theme-min.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"> 
     <link href="css/carousel.css" rel="stylesheet"> 
     <script> 
      $.getJSON("json.data", function(json){ 
      $('div[class^="move"]').on('click', function(){ 
       var id = $(this).attr('id'); 
       alert(a[id].data.datatext) 
       $('#main-view').text(a[id].data.datatext); // in #main-view display text 
      }) 
      }); 
     </script> 

     <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> 
    </head> 
<body> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 
     <!-- Navigation --> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <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="#"> 
      <img style="height: 30px; margin-top: -5px;" class="img-responsive" alt="" src="img/logo/Logo.png"> 

     </a> 
    </div> 

    <div class="collapse navbar-collapse navbar-ex1-collapse"> 

     <ul class="nav navbar-nav"> 
      <li id="ribbon"><a href="#"></a></li> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Protfolio</a></li> 
      <li><a href="#">Membership Plan</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 

     <div class="col-sm-3 col-md-3 pull-right"> 
     <form class="navbar-form" role="search"> 
     <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
      <div class="input-group-btn"> 
       <button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
      </div> 
     </div> 
     </form> 
     </div> 

    </div> 
</div> 

    <!-- Main jumbotron for a primary marketing message or call to action --> 
    <!--SERVICES SECTION --> 

     <section class='circle-animation'> 
     <div class="container-fluid"> 
      <div class="row"> 
      <div class="hidden-xs hidden-sm"> 
       <div class="col-sm-6 col-sm-offset-3 col-sm-pull-1"> 
       <div id="middlepapir" class="jumbotron"> 
        <div class="row"> 

        <img id="main-view" class="papir img-responsive" src="img/circle/11.png" alt=""> 
        <div class="row"> 
         <div id="all" class="move1 col-sm-4 col-xs-4 col-md-push-4"> 
          <a href="#"><img class="position1 round" src="img/circle/off/home-all-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="cover" class="move2 col-sm-4 col-xs-4 col-md-push-1"> 
          <a href="#"><img class="position2 round" src="img/circle/off/home-cover-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="design" class="move3 col-sm-4 col-xs-4 col-md-push-7"> 
          <a href="#"><img class="position3 round" src="img/circle/off/home-design-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="diy" class="move4 col-sm-4 col-xs-4"> 
          <a href="#"><img class="position4 round" src="img/circle/off/home-diy-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="marketing" class="move5 col-sm-4 col-xs-4 col-md-push-8"> 
          <a href="#"><img class="position5 round" src="img/circle/off/home-marketing-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="other" class="move6 col-sm-4 col-xs-4 col-md-push-1"> 
          <a href="#"><img class="position6 round" src="img/circle/off/home-other-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="special" class="move7 col-sm-4 col-xs-4 col-md-push-4"> 
          <a href="#"><img class="position7 round" src="img/circle/off/home-special-icon-off.png"></a> 
         </div> 
        </div> 
        <div class="row"> 
         <div id="vip" class="move8 col-sm-4 col-xs-4 col-md-push-7"> 
          <a href="#"><img class="position8 round" src="img/circle/off/home-vip-icon-off.png"></a> 
         </div> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div>  
     </div> 
     </section> 
      <!--end circle-container-->

來源

2015-05-28 PetarP

你能從這個小提琴中解脫出來嗎？ –

將您的js代碼包裝在$（document）.ready（function（）{}）中，然後嘗試 – stanze

您可以在http://plnkr.co/更新您的代碼，以便我們可以幫助您。 – stanze

你的JavaScript代碼運行。

這部分代碼需要打包在$(document).ready()調用中。

<script> 
     $(document).ready(function(){ 
     $.getJSON("json.data", function(json){ 
      $('div[class^="move"]').on('click', function(){ 
      var id = $(this).attr('id'); 
      alert(a[id].data.datatext) 
      $('#main-view').text(a[id].data.datatext); // in #main-view display text 
      }); 
     }); 
     }); 
    </script>

或者，你可以將它移到您的<body></body>標籤的底部。這不是一個好的解決方案。仍然將其包裝在document.ready方法中。

編輯：

既然你都拿到從$.getJSON() AJAX調用404未找到錯誤，這意味着你將需要一臺服務器。

基本上，如果您的json.data文件實際上並未從localhost提供，您將無法通過將靜態html文件加載到Web瀏覽器來進行ajax調用。 Setting up a simple Node.js server非常快速和無痛。

您只需要設置一個路徑來提供json.data文件。以從該鏈接的server.js代碼段，修改GET請求部分看起來像這樣：

/* ************** 
* GET Requests * 
* **************/ 

// index.html 
app.get(‘/‘, function(req, res) { 
    res.sendFile(‘index.html‘); 
}); 

// json.data 
app.get(‘json.data‘, function(req, res) { 
    res.sendFile(‘json.data‘); 
});

此外，你應該考慮重新命名json.data到data.json。

來源

2015-05-28 05:32:19

我已經包裝了你的代碼，但仍然沒有加載它，有沒有一種方法將它加載到我的html中，我很難做出一個小提琴的例子，但我會嘗試。 – PetarP

Chrome控制檯是否顯示來自ajax調用'.getJSON（）'的任何錯誤？你是否收到404 Not Found或什麼？ –

您是否在修改它之後檢查了您的JSON對於linter有效？ HTTP：// jsonlint。com/ – TeraTon

首先檢查您的服務器上的json文件是否可用。只要去http://yourservername/json.data

另外，你的json.data文件不應該有任何JavaScript它應該是普通的json。它應該包含「{...}」而不是「變種A = {...}」

在更改JSON文件的內容您的javascript函數應該是這個樣子：

$.getJSON("json.data", function(json) { 
    $('div[class^="move"]').on('click', function() { 
     var id = $(this).attr('id'); 
     alert(json[id].data.datatext) 
     $('#main-view').text(json[id].data.datatext); // in #main-view display text 
    }) 
});

來源

2015-05-28 05:52:18

Whait我並不需要它環繞的$（document）。就緒（函數（）{}），之後我刪除一個變種在data.json，我會後我設法解決這個網絡問題仄服務器。 – PetarP

Json.data沒有加載/正確顯示

回答

相關問題