آموزش مقدماتی JSON

محتوا

1 آموزش JSON مقدماتی قسمت اول
1. 1.1 Json چیست ؟
2. 1.2 گرفتن JSON از سرور :

آموزش JSON مقدماتی قسمت اول

Json چیست ؟

Json مخفف Javascript Object Notation، یک فرمت برای ذخیره سازی و تبادل داده‌ها می‌باشد.
به مثال زیر دقت کنید :

{
"person": {
"1":{"firstName":"Pouria","lastName":"Parhami","interests":["reading","games","programing"]},
"2":{"firstName":"Hooman","lastName":"Moein","interests":["music","design"]},
"3":{"firstName":"Shangul","lastName":"Shangolian","interests":null}
}
}

کد بالا یک json است، که دارد به ما می‌گوید، person دارای اطلاعات اشخاص است.

این اطلاعات شامل شماره، نام، نام خانوادگی و علایق می‌باشد، شماره یک می‎گوید نام فرد Pouria، نام خانوادگی او parhami و علایقش خواند، بازی کردن و برنامه نویسی است.
بعد از دیدن کد بالا احتمالا متوجه شدید چرا به آن javaScript Object Notation می‎گویند. چون طریقه نوشتن json بسیار شبیه به نوشتن object در جاوا اسکریپت است .
اما خوبی‎های json :
انسان می‎تواند به راحتی json را بخواند و متوجه اطلاعات آن شود.
Json به زبان خواصی وابسته نیست، مستقل است و تمام زبان‎های برنامه نویسی محبوب آن را پشتی‎بانی می‎کنند.
Json ساختار بسیار سازمان یافته‎ای دارد و به راحتی می‎توان آن را ساخت و به آن دست‎رسی داشت.

قوانین نوشتاری Json :
1- داده‎های json باید داخل آکولاد باشند {}
2- داده باید دارای یک کلید باشند .
3- کلید‎ها باید داخل دابل کوتیشن باشند “”
4- داده و کلید باید با علامت دو نقطه از هم جدا بشوند :
5- از کاما برای جدا کردن داده‎ها از هم استفاده می‎شود ,
6- از براکت برای نگه‎داری آرایه استفاده می‎شود []
7- اشیاء را درون آکولاد نگه داری می‎کنیم.

Json چه مقادیری می‌تواند داشته باشد ؟
Number, string , boolen, null, array, object
حال بیاید با استفاده از این قوانین یک json ساده بسازیم، اول آکولاد، دوم ایجاد کلید داخل دابل کوتیشن، سوم قرار دادن علامت : چهارم نوشتن مقداری که باید در کلید باشد پنجم جدا کردن داده‌ها با استفاده از کاما
اولین json را برای اعداد می‌سازیم :

{
"age": 23,
"marks": 56,
"year": 2016
}

همان طور که می‌بینید برای اعداد لازم نیست داده در داخل دابل کوتیشن باشد .

رشته String :

{
"firstName": "Pouria",
"book": "java",
"comment": "Hooman asked,\"What is your name\""

}

می‌بینید که اگر بخواهیم رشته‌ای مانند Hooman asked,”What is your name” را بنویسیم نیاز است تا برای رفع اختلال در قرار گرفتن دابل کوتیشن ها از علامت \ بک اسلش استفاده کنیم .
Boolean :

{
"isMarried":false,
"passed":true,
"blind":false
}

Null :

{
"hobbies":null,
"languages":null
}

آرایه Array :
ابتدا آرایه‌ای از رشته‌ها string می‌سازیم :

{
"friends": [
"Hooman",
"Pouria"
]
}

آرایه‌ای از اعداد numbers:

{
"numbers": [
12,
1,
567,
10,
7
]
}

آرایه‌ای از Boolean :

{
"passed": [
false,
true
]
}

آرایه‌ای از آرایه :

{
"multiples": [
[
2,
4,
5,
6,
8
],
[
3,
6,
9,
12,
15
],
[
4,
8,
12,
16,
20
]
]
}

آرایه‌ای از اشیاء Objects

{
"employees": [
{
"name": "Hooman Moein",
"id": 2049,
"department": "accounts"
},
{
"name": "Pouria Parhami",
"id": 249,
"department": "sales"
},
{
"name": "Yashe Zafari",
"id": 29,
"department": "accounts"
}
]
}

شئ Object :

{
"address": {
"street": "Emamat street",
"city": "Mashhad",
"ostan": "khorasan",
"postCoce": 449920384
},
"phone": {
"residence": 1234,
"office": 98080,
"mobile": 938483
}
}

همان طور که می‌بینید من دو شئ به نام office وaddress ایجاد کردم.
در پایان تمام کد json که نوشتیم را در کنار هم خواهیم دید:

{
"mive": "Anar",
"name": "Hooman",
"age": 23,
"marks": 56,
"year": 2016,
"firstName": "Pouria",
"book": "java",
"comment": "Hooman asked,\"What is your name\"",
"isMarried": false,
"blind": false,
"hobbies": null,
"languages": null,
"friends": [
"Hooman",
"Pouria"
],
"numbers": [
12,
1,
567,
10,
7
],
"passed": [
false,
true
],
"multiples": [
[
2,
4,
5,
6,
8
],
[
3,
6,
9,
12,
15
],
[
4,
8,
12,
16,
20
]
],
"employees": [
{
"name": "Hooman Moein",
"id": 2049,
"department": "accounts"
},
{
"name": "Pouria Parhami",
"id": 249,
"department": "sales"
},
{
"name": "Yashe Zafari",
"id": 29,
"department": "accounts"
}
],
"address": {
"street": "Emamat street",
"city": "Mashhad",
"ostan": "khorasan",
"postCoce": 449920384
},
"phone": {
"residence": 1234,
"office": 98080,
"mobile": 938483
}
}

اگر به یاد داشته باشید در اولین قسمت از آموزش کد json را به شما نشان دادیم و به صورت ابتدایی شروع به خواندن اطلاعات آن کردیم، حال یک بار دیگر نگاهی به آن می‌اندازیم.

{
"person": {
"1": {
"firstName": "Pouria",
"lastName": "Parhami",
"interests": [
"reading",
"games",
"programing"
]
},
"2": {
"firstName": "Hooman",
"lastName": "Moein",
"interests": [
"music",
"design"
]
},
"3": {
"firstName": "Shangul",
"lastName": "Shangolian",
"interests": null
}
}
}

شئ به نام person وجود دارد، داخل person سه کلید داریم که هر کدام از آنها داری یک object می‌باشند، داخل شئ اول آرایه‌ای به نام interests وجود دارد، به همین شکل آبجکت 2,3 را نیز بخوانید.

خواندن و نوشتن json در java script :
برای خواندن یک رشته json در جاوا اسکریپت باید json خود را درون علامت ‘ ‘ تک کوتیشن قرار دهیم:

var jsonData = '{"first":"Pouria","last":"Parhami"}';

سپس با استفاده از JSON.parse آن را به یک آبجکت جاوا اسکریپت تبدیل کنیم:

var jsObject = JSON.parse(jsonData);

در آخر برای نمایش اطلاعات کافی است بگویم از شئ مورد نظر کدام پراپرتی یا متد را می‌خواهیم:

document.getElementById("placeForJson").innerHTML = jsObject+"<br>"+ jsObject.first+" "+jsObject.last;

صفحه‌ای به نام index.html می‌سازم و کارهایی که گفته شد را انجام می‌دهم .

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>JSON</title>

</head>

<body>

<h2>Json and JavaScript</h2>

<h4 id="placeForJson"></h4>

</body>

<script>

var jsonData = '{"first":"Pouria","last":"Parhami"}';

var jsObject = JSON.parse(jsonData);
document.getElementById("placeForJson").innerHTML = jsObject + "<br>" + jsObject.first + " " + jsObject.last;
</script>
</html>

اما برای تبدیل یک آبجکت جاوااسکریپت به json کافی است از JSON.stringify استفاده کنم .

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>JSON</title>

</head>

<body>

<h2>Json and JavaScript</h2>

<h4 id="placeForJson"></h4>

</body>

<script>

var jsObject = {first: "Hooman", last: "Moein"};

var jsonString = JSON.stringify(jsObject);
document.getElementById("placeForJson").innerHTML = jsonString;

</script>
</html>

استخراج داده‌های دلخواه از رشته json :
Json زیر اطلاعات مربوط به وضعیت آب و هوا، موقعیت جغرافیایی و … یک شهر در ژاپن را داراست.

{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}

من تمام این اطلاعات لازم ندارم، فقط می‌خواهم طول عرض جغرافیایی، توضیحات، فشار و نام شهر را داشته باشم ،
ابتدا در فایل index.html این رشته json را به یک آبجکت javascript تبدیل می‌کنیم:

var jsonData = '{"coord":{"lon":139,"lat":35},"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},' +
'"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],' +
'"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},' +
'"wind":{"speed":7.31,"deg":187.002},' +
'"rain":{"3h":0},"clouds":{"all":92},"dt":1369824698,"id":1851632,"name":"Shuzenji","cod":200}';

var javaScriptObject = JSON.parse(jsonData);

سپس برای گرفتن طول و عرض جغرافایی اول باید ببینیم نام کلید آنها چیست و چگونه نگه‌داری می‌شوند، نام کلید coord است و به صورت شئ از این اطلاعات نگه‌داری می‌ شود. پس می‌توانیم این گونه به این اطلاعات دسترسی داشته باشیم .

document.getElementById("longitude").innerHTML = "Longitude is: " + javaScriptObject.coord.lon;
document.getElementById("latitude").innerHTML = "Latitude is: " + javaScriptObject.coord.lat;

برای گرفتن description نیز ابتدا نام کلید آن را پیدا می‌کنیم weather، این یک آرایه از آبجکت‌ها است. به کدام خانه می‌خواهیم دست‌رسی داشته باشیم؟

به اولین، حتما به یاد دارید اولین خانه یک آرایه خانه 0 است، پس اولین خانه و کدام پراپرتی از این آبجکت را می‌خواهیم description

document.getElementById("description").innerHTML = "Description is : " + javaScriptObject.weather[0].description;

مابقی نیز به همین شکل، محتوای فایل index.html به صورت کامل:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>JSON</title>

</head>

<body>

<h2>Collect Custom Information</h2>

<h4 id="longitude"></h4>
<h4 id="latitude"></h4>
<h4 id="description"></h4>
<h4 id="pressure"></h4>
<h4 id="cityName"></h4>

</body>

<script>

var jsonData = '{"coord":{"lon":139,"lat":35},"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},' +
'"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],' +
'"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},' +
'"wind":{"speed":7.31,"deg":187.002},' +
'"rain":{"3h":0},"clouds":{"all":92},"dt":1369824698,"id":1851632,"name":"Shuzenji","cod":200}';

var javaScriptObject = JSON.parse(jsonData);

document.getElementById("longitude").innerHTML = "Longitude is: " + javaScriptObject.coord.lon;
document.getElementById("latitude").innerHTML = "Latitude is: " + javaScriptObject.coord.lat;
document.getElementById("description").innerHTML = "Description is : " + javaScriptObject.weather[0].description;
document.getElementById("pressure").innerHTML = "pressure is: " + javaScriptObject.main.pressure;
document.getElementById("cityName").innerHTML = "City Name is: " + javaScriptObject.name;
</script>
</html>

چه زمانی به جای نقطه باید از براکت استفاده کرد ؟؟
مثال فرض کنید چنین json داریم :

{“person:”{“1”:”pouria”,”2”:”hooman”}}

اگر برای دست‌رسی به Pouria کد زیر را بنویسیم دچار خطا می‌شویم :

javaScriptObject.person.1;

چرا ؟ چون ما از integer به عنوان نام کلید استفاده کرده‌ایم، پس چه باید کرد؟ کافی است 1 را درون براکت قرار دهیم :

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>JSON</title>

</head>

<body>

<h2>Collect Custom Information</h2>

<h3 id="bracket"></h3>

</body>

<script>

var jsonData = '{"person":{"1":"pouria","2":"hooman"}}';

var javaScriptObject = JSON.parse(jsonData);

document.getElementById("bracket").innerHTML = javaScriptObject.person[1];

</script>
</html>

در قسمت قبل متوجه شدیم، اگر کلید ما عددی باشد، نمی‌توانیم با نقطه به آن دسترسی پیدا کنیم و به جای آن باید از براکت استفاده کنیم.

موقعیت دیگری که در آن نمی‌توان از نقطه استفاده کرد زمانی است که کلید شما فضای خالی space داشته باشد.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>JSON</title>

</head>

<body>

<h2>Collect Custom Information</h2>

<h3 id="bracket"></h3>
</body>

<script>

var jsonData = '{"person":{"first name":"pouria","2":"hooman"}}';

var javaScriptObject = JSON.parse(jsonData);

document.getElementById("bracket").innerHTML = javaScriptObject.person["first name"];

</script>
</html>

موقعیت دیگر زمانی است، که نام کلید ما درون یک متغییر باشد و بخواهیم به واسطه آن متغییر داده را بگیریم :

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>JSON</title>

</head>

<body>

<h2>Collect Custom Information</h2>

<h3 id="bracket"></h3>

</body>

<script>

var jsonData = '{"person":{"first":"pouria","2":"hooman"}}';

var javaScriptObject = JSON.parse(jsonData);
var mj = "first";

document.getElementById("bracket").innerHTML = javaScriptObject.person[mj];
</script>
</html>

گرفتن JSON از سرور :

برای این کار xampp را برروی لپ تاپ خود نصب کنید، به پوشه htdocs در xampp رفته و پوشه‌ای به نام server ایجاد می‌کنید. سپس دورن این پوشه فایلی به نام getDataFromServer.html بسازید.
همچنین دو فایل به نام‌های ex1.json و ex2.json را نیز بسازید و درون این پوشه قرار دهید .

محتوای ex1.json :

{
"firstName": "Hooman",
"lastName": "Moein",
"age": 27,
"married": false,
"hobbies": null,
"experience": [
"HTML",
"WordPress",
"CSS"
],
"address": {
"street": "emamat street",
"state": "khorasan razavi",
"post": "76473"
}
}

محتوای ex2.json :

{
"inspirational": [
{
"title": "The power of positive thinking",
"author": "Dr Norman Vincent",
"price": 9.03
},
{
"title": "How successful people think",
"author": "John C. Maxwell",
"price": 5.95
},
{
"title": "The 7 habits",
"author": "Stephen R. Covey",
"price": 9.03
}
],
"it": [
{
"title": "Python Programing",
"author": "John Zelle",
"price": 19.99
},
{
"title": "HTML and CSS : Design and build websites",
"author": "Jon Duckett",
"price": 17.19
},
{
"title": "Help your kids with computer coding",
"author": "Dk Publishina",
"price": 16.83
}
],
"children's": [
{
"title": "The wonderful wizar of oz",
"author": "L. Frank Baum",
"price": 3.19
},
{
"title": "Charlie and the chocolate factory",
"author": "Roald Dahl",
"price": 17.19
}
]
}

می‌تو‌انیم برای دسترسی و دیدن این فایل‌ها از طریق مرورگر به آدرس http://localhost/server/ex1.json مراجعه کنیم، البته اگر نام فایل و فولدرها برای شما متفاوت است باید به آدرس خود بروید.
به فایل getDataFromServer.html می‌روم ، در اینجا من از ajax برای گرفتن اطلاعات استفاده می‌کنم، اگر در مورد ajax اطلاعات کمی دارید می‌توانید آموزش ajax را در اینجا مطالعه کنید .

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Get Json From Server</title>
<script>

function getJsonData() {
var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.open("GET", "http://localhost/server/ex1.json", false);
xmlHttpReq.send();

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById("showResult").innerHTML = "<pre>" + xmlHttpReq.responseText + "</pre>";

}

}
</script>
</head>
<body>

<h3>Hello this data come from server</h3>

<button id="getJson" onclick="getJsonData();">Get Data</button>

<div id="showResult"></div>

</body>

</html>

همان طور که می‌بینید یک دکمه داریم که در هنگام کلیک شدن فانکشنی به نام getJsonData را فراخوانی می‌کند، این فانکشن ajax ما را اجرا می‌کند، در ajax هم اطلاعات را خوانده و در div نمایش می‌دهم برای اینکه اطلاعات ex2.json را ببینم کافی است، url را تغییر دهیم.
xmlHttpReq.open(“GET”, “http://localhost/server/ex2.json”, false);

مرورگر خود را باز کنید و به آدرس http://localhost/server/getDataFromServer.html
برروی دکمه Get Data کلیک کنید اگر به درستی عمل کرده باشید باید مانند من اطلاعات ex1.json را مشاهده کنید.

چگونه Json را از API دریافت کنیم ؟
برای دریافت json از api سایت‌های مختلف می‌توانید از همان روش استفاده کنید، من از api وب سایت http://fixer.io/ استفاده خواهم کرد، این آدرس api سایت مورد نظر است است .
http://api.fixer.io/latest?base=USD
در همان پوشه server فایلی به نام getJsonFromApi.html می‌سازم و در آن اطلاعات را از این api دریافت می‌کنم .

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Get Json From Server</title>
<script>

function getJsonData() {
var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.open("GET", "http://api.fixer.io/latest?base=USD", false);
xmlHttpReq.send();

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById("showResult").innerHTML = "<pre>" + xmlHttpReq.responseText + "</pre>";

}

}
</script>
</head>
<body>

<h3>Hello this data come from API</h3>

<button id="getJson" onclick="getJsonData();">Get Data</button>

<div id="showResult"></div>

</body>

</html>

به این صفحه بروید و روی دکمه Get Data کلیک کنید باید اطلاعات را ببینید.

حال می‌خواهیم از api سایت http://openweathermap.org/ استفاده کنیم، تا اطلاعات آب و هوای مشهد را دریافت کنیم، اطلاعات مورد نظر من طول و عرض جغرافیایی نام شهر و توضیحات است .
کد شهر مشهد 124665 است .

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Get Json From Server</title>
<script>

function getJsonData() {
var xmlHttpReq = new XMLHttpRequest();

var url1 = "http://api.openweathermap.org/data/2.5/weather?";
var cityId = "124665";
var appId = "50411e415d8220c05f8f14c59ad97677";

url1 += "id=" + cityId + "&appid=" + appId;

xmlHttpReq.open("GET", url1, false);
xmlHttpReq.send();

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

var result = xmlHttpReq.responseText;
var jsResult = JSON.parse(result);

document.getElementById("showResult").innerHTML = "<h2>City Name :" + jsResult.name + "</h2>" +
"<p> Longitude is:" + jsResult.coord.lon + "latitude is: " + jsResult.coord.lat + "</p>" +
"<p>Description: " + jsResult.weather[0].main + "," + jsResult.weather[0].description + "</p>";

}

}
</script>
</head>
<body>

<h3>Hello this data come from API</h3>

<button id="getJson" onclick="getJsonData();">Get Data</button>

<div id="showResult"></div>

</body>

</html>

بعد از کلیک برروی دکمه Get data باید چیزی مشابه شکل زیر را ببینید:

فرستادن اطلاعات با post :
چطور است برای خود یک ماشین محاسبه BMI بسازیم؟

فرمی داریم که قد و وزن شما را می‌گیرد، یک div برای نمایش اطلاعات و یک دکمه برای فرستادن اطلاعات مورد نظر وجود دارد.
هم‌چنین فایلی به نام bmiApi.php ساختم که در آن داده‌ها دریافت شده و bmi محاسبه می‌شود، سپس اطلاعاتی که باید به سمت کاربر برود به صورت json درآمده و فرساده می‌شوند.
تفاوت اینجا در این است که این دفعه از متد post و Asynchronous برای فرستادن اطلاعات در ajax استفاده خواهیم کرد.
محتویات bmiApi.php

<?php
$height = $_POST['height'];
$weight = $_POST['weight'];

$heightInMs = $height / 100;

$bmi = number_format($weight / ($heightInMs * $heightInMs), 2, '.', '');

$message = "";

if ($bmi <= 18.5) {
$message = "You are under weight.";
} elseif ($bmi > 18.5 && $bmi <= 24.9) {
$message = "Congrats !! You have normal weight";
}else{
$message = ":)";
}
$output = array(

"bmi" => $bmi,
"bmiMessage" => $message

);

echo json_encode($output);

محتویات bmi.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate BMI</title>

<script>

function contactApi() {

var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;

if ((height % 1) >= 0 && (weight % 1) >= 0) {

var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.open("POST", "http://localhost/server/bmiApi.php", true);
xmlHttpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpReq.send("height=" + height + "&weight=" + weight);

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
var result = xmlHttpReq.responseText;
var jsObject = JSON.parse(result);
document.getElementById("message").innerHTML ="<p>your BMI is: "+ jsObject.bmi+" AND "+jsObject.bmiMessage+"</p>";
}
}
} else {
alert("ops");
}
}
</script>

</head>
<body>

<p><label for="height">height</label><input type="text" id="height"></p>
<p><label for="weight">weight</label><input type="text" id="weight"></p>
<div id="message"></div>
<button id="process" onclick="contactApi();">Calculate BMI</button>
</body>
</html>

و در آخر شما چنین چیزی خواهید داشت :

در مثال بالا ما فقط دو پارامتر را فرستادیم. اما اگر بخواهیم بیش از دو پارامتر را ارسال کنیم چه باید کرد ؟

بهتر است اطلاعات به صورت json ارسال شوند، من از همان فایل‌هایی که در مثال قبل ایجاد کردیم استفاده می‌کنم، البته با کمی تغییرات کوچک در آنها:
bmiApi.php

<?php

$input = json_decode($_POST['data']);

$height = $input->height;
$weight = $input->weight;

$heightInMs = $height / 100;

$bmi = number_format($weight / ($heightInMs * $heightInMs), 2, '.', '');

$message = "";

if ($bmi <= 18.5) {
$message = "You are under weight.";
} elseif ($bmi > 18.5 && $bmi <= 24.9) {
$message = "Congrats !! You have normal weight";
}else{
$message = ":)";
}
$output = array(

"bmi" => $bmi,
"bmiMessage" => $message

);

echo json_encode($output);

Bmi.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate BMI</title>

<script>

function contactApi() {

var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;

if ((height % 1) >= 0 && (weight % 1) >= 0) {

var jsObject = {height: height, weight: weight};
var jsonData = JSON.stringify(jsObject);

var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.open("POST", "http://localhost/server/bmiApi.php", true);
xmlHttpReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpReq.send("data=" + jsonData);

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
var result = xmlHttpReq.responseText;
var jsObject = JSON.parse(result);
document.getElementById("message").innerHTML = "<p>your BMI is: " + jsObject.bmi + " AND " + jsObject.bmiMessage + "</p>";
}
}
} else {
alert("ops");
}
}
</script>

</head>
<body>

<p><label for="height">height</label><input type="text" id="height"></p>
<p><label for="weight">weight</label><input type="text" id="weight"></p>
<div id="message"></div>
<button id="process" onclick="contactApi();">Calculate BMI</button>
</body>
</html>

تا اینجا چیزهای زیادی آموختیم، حال نوبت آن است که یک نرم افزار تبدیل واحد پول بسازیم، با استفاده از همان api که در گذشته دید.

ابتدا سعی کنید خود این نرم افزار را ایجاد کنید .

در ابتدا صفحه‌ای به نام currency.html می‌سازیم که در آن یک جدول و چند dropDown list برای انتخاب واحد پول و دو input برای گرفتن و نمایش واحد‌ها خواهم داشت.
Currency.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
</head>
<body>

<div id="box">

<h2>Currency Converter</h2>
<table>
<tr>
<td>
<input type="text" id="fromAmount" value="1"/>
</td>
<td>
<select id="from">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD">Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD" selected>US Dollar(USD)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="toAmount"/>
</td>
<td>
<select id="to">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD" selected>Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD">US Dollar(USD)</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>

حال تنها کاری که باید انجام شود، فرستادن طلاعات به این آدرس http://api.fixer.io/latest?symbols=USD,RUB است.
سپس گرفتن اطلاعات و محاسبه تبدیل ارز را انجام می‌دیهم .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
<script>

function convertCurrency() {

var from = document.getElementById("from").value;
var to = document.getElementById("to").value;

var xmlHttpReq = new XMLHttpRequest();
var url = "http://api.fixer.io/latest?symbols=" + from + "," + to;

xmlHttpReq.open("GET", url, true);
xmlHttpReq.send();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

var result = xmlHttpReq.responseText;
var jsResult = JSON.parse(result);

var oneUnit = jsResult.rates[to]/jsResult.rates[from];
var amt = document.getElementById("fromAmount").value;
document.getElementById("toAmount").value = (oneUnit*amt).toFixed(2);

}

}

}

</script>

</head>
<body onload="convertCurrency();">

<div id="box">

<h2>Currency Converter</h2>
<table>
<tr>
<td>
<input type="text" id="fromAmount" value="1" onkeyup="convertCurrency();"/>
</td>
<td>
<select id="from" onchange="convertCurrency();">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD">Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD" selected>US Dollar(USD)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="toAmount"/>
</td>
<td>
<select id="to" onchange="convertCurrency();">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD" selected>Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD">US Dollar(USD)</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>

آموزش ما اینجا تمام می‌شود. در مورد json بیشتر تحقیق کنید، کدهایی که با هم نوشتیم را بهبود ببخشید و خود از ابتدا آنها را بنویسید.

موفق و شاد باشید.

دیدگاهتان را بنویسید لغو پاسخ

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

آموزش مقدماتی JSON

آموزش JSON مقدماتی قسمت اول

Json چیست ؟

گرفتن JSON از سرور :

دیدگاهتان را بنویسید لغو پاسخ

دارکوب وب

۰۹۳۸۶۵۶۰۲۰۰