我正在尝试加载我的 data.json 文件，以便在单击按钮时可以显示文本。我对 JQuery 的奇迹还很陌生，所以我很难理解如何正确地做到这一点。
这是我的 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 部分:
<!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-->
最佳答案
您的 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() 收到 404 Not Found 错误AJAX 调用，这意味着您需要一个服务器。
基本上，如果您的json.data文件实际上并不是从本地主机提供的，您将无法通过将静态 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 .
关于javascript - Json.data 未正确加载/显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30497668/