Jquery JSON不顯示數據

我一直在尋找小時，似乎無法找到問題在我的代碼中。我嘗試過多種資源並搜索不同的網站。當點擊「獲取JSON數據」時，下面沒有任何內容。有人可以看看代碼，看看我哪裏錯了請。Jquery JSON不顯示數據

非常感謝！

$(document).ready(function() { 
 

 
    $('#clickme').click(function(e) { 
 

 
    $.getJSON('data.json', function(data) { 
 

 
     var items = []; 
 

 
     $.each(data, function(key, val) { 
 

 
     items.push('<li id="' + key + '">' + val + '</li>'); 
 

 
     }); 
 

 
     $('<ul/>', { 
 
     'class': 'interest-list', 
 
     html: items.join('') 
 
     }).appendTo('#ajaxjson'); 
 

 

 

 
    }); 
 

 
    e.preventDefault(); 
 
    }); 
 

 
});

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="styles/reset.css"> 
 
    <link rel="stylesheet" type="text/css" href="styles/style.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="scripts/hide_img.js"></script> 
 
    <script src="scripts/fadein_out.js"></script> 
 
    <script src="scripts/increaseTextSize.js"></script> 
 
    <script src="scripts/hideVideo.js"></script> 
 
    <script src="scripts/showVideo.js"></script> 
 
    <script src="scripts/ChangeHeader.js"></script> 
 
    <script src="scripts/eventHover.js"></script> 
 
    <script src="ajaxload.js"></script> 
 

 

 

 

 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
    <script src="scripts/form_tooltip.js"></script> 
 

 
    <style> 
 
    .mma { 
 
     font-size: 75%; 
 
     color: ; 
 
    } 
 
    .important { 
 
     font-weight: bold; 
 
     font-size: 50px; 
 
    } 
 
    .blue { 
 
     color: blue; 
 
    } 
 
    </style> 
 

 
    <title>Mixed Martial Arts</title> 
 

 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div class="wrapper"> 
 
     <h1 id="headertext">Mixed Martial Arts<span class="color"></span></h1> 
 
     <nav> 
 
     <ul> 
 
      <li id="hideshowimg"><a href="#">Hide/Show Image</a> 
 
      </li> 
 
      <li id="increaseText"><a href="#">Increase Text</a> 
 
      </li> 
 
      <li id="showVideo"><a href="#">ShowVideo</a> 
 
      </li> 
 
      <li id="changecolor"><a href="#">Colour</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 

 
    </div> 
 
    </header> 
 

 
    <div id="hero-image"> 
 
    <div class="wrapper"> 
 
     <a href="" class="button-1">Fade Out/In</a> 
 
    </div> 
 
    </div> 
 

 
    <div id="features"> 
 
    <div class="wrapper"> 
 
     <ul> 
 
     <li class="feature-1"> 
 
      <h4 class="feature1-heading">What is MMA</h4> 
 
      <p class="mma">MMA is a full-contact combat sport that allows for different techniques to grapple and strike their oppentent.</p> 
 
     </li> 
 
     <li class="feature-2"> 
 
      <h4>Common Disciplines</h4> 
 
      <a href="#" id="clickme">Get JSON Data</a> 
 
      <p id="ajaxjson"></p> 
 

 

 
      <li class="feature-3"> 
 
      <h4>Competitions</h4> 
 
      <p class="mma">There are many competitions that fighters can fight in such as Ultimate Fighting Championship (UFCPride, CageWars, Clan Wars and many more. MMA is the fastest growing sport today!</p> 
 
      </li> 
 
      <div class="clear"></div> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div id="primary-content"> 
 
    <div class="wrapper"> 
 
     <article> 
 
     <h3>What is MMA?</h3> 
 
     <a href="" class="button-video">Hide Video</a> 
 

 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/PnUmcL07xnY" frameborder="0" allowfullscreen></iframe> 
 
     </article> 
 
    </div> 
 
    </div> 
 

 

 

 
    <div id="cta"> 
 
    <div class="wrapper"> 
 
     <h3>Contact Form!</h3> 
 
     <p> 
 
     <form> 
 
      First name: 
 
      <br> 
 
      <input id="txtName" title="Please input your firstname!" type="text" name="firstname"> 
 
      <br>Last name: 
 
      <br> 
 
      <input id="txtSurname" title="Please input your lastname!" type="text" name="lastname"> 
 
     </form> 
 
     </p> 
 
     <a href="#" class="button-2">Submit</a> 
 
    </div> 
 
    </div> 
 

 
    <footer> 
 
    <div class="wrapper"> 
 
     <div id="footer-info"> 
 
     <p>Copyright 2015 Diarmuid Bogner.</p> 
 
     </div> 
 

 
     <div class="clear"></div> 
 
    </div> 
 
    </footer> 
 

 
</body> 
 

 
</html>

{ 

    "one": "Judo", 
    "two": "Karate", 
    "three": "Boxing", 

}

來源

2015-11-05 Diarmuid Bogner

能否請您發佈僅適用HTML和更好地描述你的問題的確切性質？你的JavaScript控制檯中是否有錯誤？ HTTP AJAX請求發生了什麼？你找回錯誤狀態代碼了嗎？ – thatidiotguy

你的'click'處理程序在運行嗎？你的'getJSON'回調是否運行？在[JS控制檯]中是否有任何錯誤（http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers）？ – apsillers

看到什麼下文，確保AJAX請求返回你所期望的！

function DataCtrl($) { 
 
    var self = this; 
 
    
 
    self.btn = $('#btn'); 
 

 
    self.loadData = function(event) { 
 
    event.preventDefault(); 
 
    
 
    $ 
 
//  .getJSON('data.json') // we need to comment, ajax isn't available 
 
     .when({"one": "Judo", "two": "Karate", "three": "Boxing" }) // this is just a mock for the working example 
 
     .then(function(data) { 
 
     var listItems = []; 
 
     
 
     for(var i in data) { 
 
      if(!data.hasOwnProperty(i)) { continue; } 
 
      
 
      listItems.push('<li id="listItem-'+ i +'">'+ data[i] +'</li>'); 
 
     } 
 
     
 
     return listItems; 
 
     }) 
 
     .then(function(items) { 
 
     
 
     return $('<ul />', { 
 
      html: items 
 
     }); 
 
     }) 
 
     .then(function(list) { 
 
     return $('#result').append(list); 
 
     }) 
 
    ; 
 
    
 
    
 
    }; 
 
    
 
    self.btn.click(self.loadData.bind(self)); 
 
} 
 

 

 
jQuery(document).ready(DataCtrl);

#result { width: 100%; min-height: 10em; background: lightseagreen; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btn">Load Data</button> 
 
<div id="result"></div>

來源

2015-11-05 18:15:43 Hitmands

嗨，這個顯示什麼，我需要它來顯示，但我需要它從JSON文件中提取並顯示此信息。由於div顯示不正確，它也不得不放在div上。 –

在我的代碼段我已經評論了* .getJSON（'data.json'）*這一行，因爲在stackoverflow中不可能執行xhr請求，所以，你必須**取消註釋**該行，並且，下面的行：**。當（{「一」：「柔道」，「二」：「空手道」，「三」：「拳擊」}）**僅用於這個例子，你必須使用未註釋的前一個... – Hitmands

Jquery JSON不顯示數據

回答

相關問題