Jquery JSON不显示数据答案

【问题标题】：Jquery JSON not displaying dataJquery JSON不显示数据
【发布时间】：2015-11-05 17:20:25
【问题描述】：

我已经搜索了几个小时，但似乎无法在我的代码中找到问题所在。我尝试了几种资源并搜索了不同的网站。当单击“获取 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",

}

【问题讨论】：

您能否仅发布适用的 HTML 并更好地描述您的问题的确切性质？您的 JavaScript 控制台是否出现错误？ HTTP AJAX 请求发生了什么？您是否返回错误状态代码？
您的click 处理程序是否正在运行？您的getJSON 回调是否运行？你的JS console 有错误吗？

标签： jquery css json ajax html

【解决方案1】：

看看下面的内容，确保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>

【讨论】：

您好，这显示了我需要它显示的内容，但是我需要它从 JSON 文件中提取并显示此信息。由于 div 显示不正确，是否也必须将其输出到 div 中。
在我的 sn-p 中，我用 .getJSON('data.json') 评论了这一行，因为在 stackoverflow 中不可能执行 xhr 请求，所以，你有取消注释该行，以及以下行：.when({"one": "Judo", "two": "Karate", "three": "Boxing" }) 仅用于此示例，您必须使用未注释的先前删除该行...