0
我一直在寻找小时，似乎无法找到问题在我的代码中。我尝试过多种资源并搜索不同的网站。当点击“获取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",
}
能否请您发布仅适用HTML和更好地描述你的问题的确切性质？你的JavaScript控制台中是否有错误？ HTTP AJAX请求发生了什么？你找回错误状态代码了吗？ – thatidiotguy
你的'click'处理程序在运行吗？你的'getJSON'回调是否运行？在[JS控制台]中是否有任何错误（http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers）？ – apsillers