اشتراک در خبرنامه‌ دارکوب وب

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

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

حالا می خواهم از 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>

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

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 که در گذشته دید ، ابتدا سعی کنید خود این نرم افزار را ایجاد کنید .

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

پوریا

سلام ، من پوریا هستم با جاوا آشنایی دارم به هوش مصنوعی و امنیت علاقه مندم و امید وارم آموزش هایی که در وب سایت قرار می دم برای شما مفید باشه ، موفق باشید {^}

نظر دهید

سوالات، انتقادات و پیشنهادات خود را در مورد این مطلب برای ما بفرستید. :-)