آموزش JSON مقدماتی قسمت چهار

خوب نبودخوبخیلی خوبعالیخیلی عالی (2 votes, average: 5٫00 out of 5)

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

<!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 باید چیزی مشابه شکل زیر را ببینید:

jsonpic2

فرستادن اطلاعات با 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>

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

READ  آموزش php مقدماتی قسمت هشتم

jsonpic3

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

بهتر است اطلاعات به صورت 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 که در گذشته دید.

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

پوریا پرهامی

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

مقالات پیشنهادی دارکوب وب

پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

READ  آموزش php مقدماتی قسمت هجدهم