Приветствую вас! В данный момент я активно изучаю 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 запихивает в них эти значения.
Вот и все. Исходники можно скачать также))