我正在尝试加载我的data.json文件，以便在单击按钮时显示文本。我是JQuery的新手，所以我很难理解如何正确地做到这一点。
这是我的json文件，html的一部分，我试图加载我的json.data。您可以看到我已经尝试将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部分：
<!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-->
答案 0 :(得分：1)
您的JavaScript代码段在其余HTML完成呈现之前正在运行。
这部分代码需要包含在$( 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 Not Found 错误，这意味着您需要一台服务器。
基本上，如果您的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。
答案 1 :(得分：0)
首先检查服务器上的json文件是否可用。只需转到http://yourservername/json.data
另外，你的json.data文件不应该有任何javascript它应该是普通的json。它应包含“{...}”而不是“var 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
})
});