Приветствую вас! В данный момент я активно изучаю javascript и C#, поэтому у меня просто нет времени делать новые уроки, так часто, как хотелось бы. Но сегодня исключение.
На небольшом примере визитной карточки, я бы хотел показать вам, как считывать данные из json файла и отображать их на странице.
Итак, нам понадобятся: jQuery, готовая верстка визитки, которую я уже сделал, OpenServer и желание осуществить проект.
OpenServer нужен для того, чтобы javascript мог нормально работать с файлами. Но, по какой-то причине, можно обойтись и без него, если все проверять в firefox.
Итак верстка. HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Your Visit Card</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper-card">
<div class="left">
<div class="left-content">
<img src="img/logo.png" alt=""><br />
<span id="brand-name"></span><br />
<span id="url"></span><br />
</div>
</div>
<div class="right">
<div class="name-side">
<span id="name"></span><br />
<span id="profession"></span>
</div>
<div class="contacts">
<img src="img/phone.png" alt=""><span id="phone"></span><br />
<img src="img/url.png" alt=""><span id="site"></span><br />
<img src="img/mail.png" alt=""><span id="mail"></span><br />
<img src="img/location.png" alt=""><span id="location"></i></span><br />
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
И CSS:
body{
background: #DDE1ED;
}
a{}
.wrapper-card{
margin: 10% auto;
width:395px;
height: 226px;
background: #ffffff;
}
.left{
width: 169px;
height: 225px;
border-right: 2px solid #04A8E5;
background: #1E252D;
text-align: center;
float: left;
}
.left-content{
width: 169px;
height: 187px;
background: #262D37;
margin-top: 20px;
}
.left-content img{
padding-top: 30px;
margin-bottom: 5px;
}
#brand-name{
color: white;
font-size: 20px;
}
#url{
color: #118BA2;
}
.right{
width: 222px;
height: 225px;
float: right;
}
.name-side{
width:211px;
height: 45px;
background: url(../img/name_bg.png) no-repeat;
background-position: 41px 0px;
margin: 20px 0 0 0;
text-align: center;
padding-left: 11px;
padding-top: 5px;
}
#name{
font-size: 14px;
font-weight: bold;
}
#profession{
color: white;
}
.contacts{
margin:15px 0 10px 40px;
}
.contacts span{
width: 21px;
height: 21px;
font-size: 14px;
}
.contacts img{
width: 21px;
height: 21px;
margin: 6px 5px 0 0;
}
Сам скрипт main.js:
$(document).ready(function(){
$.getJSON('info.json', function(data){
$.each(data, function(key, value){
document.getElementById("brand-name").innerText = value.brandName;
document.getElementById("url").innerText = value.url;
document.getElementById("name").innerText = value.name;
document.getElementById("profession").innerText = value.profession;
document.getElementById("phone").innerText = value.phone;
document.getElementById("site").innerText = value.site;
document.getElementById("mail").innerText = value.mail;
document.getElementById("location").innerText = value.location;
});
});
});
И наша, мини база info.json :
{
"info":{
"brandName": "BRAND NAME",
"url" : "www.compani.com",
"profession":"grafic designer",
"name": "THOMAS SMITH",
"phone":"+380123456780",
"site":"www.slusar.su",
"mail":"skubidu@gmail.com",
"location":"Ukraine, Kremenchug"
}
}
Как же ЭТО работает? Все очень просто!
У каждого поля в HTML , где должна быть информация мы указываем уникальный id.
Затем, пишем скрипт, используя мощь jquery, который обращается в Json (по сути как к ассоциативному массиву), выдирая из него ключи и их значения.
После чего, обращаясь, к полям по id запихивает в них эти значения.
Вот и все. Исходники можно скачать также))
