Fetching JSON API Data on Webpage with AJAX

Fetching JSON API Data on Webpage with AJAX

บทความนี้ เราจะทำการนำค่าจาก อุปกรณ์ IoT มาแสดงผลแบบ Real-time บนหน้าบทความของ Joomla กัน จะทำให้เราสามารถดูค่าจากตัว Sensor ต่างๆได้ง่ายขึ้น โดยใช้การดึงข้อมูลจาก API ที่เป็นรูปแบบข้อมูล JSON ร่วมกับ AJAX Script วิธีการนี้จะทำให้สามารถอัพเดตข้อมูลบนหน้าเพจได้โดยตรง โดยไม่ต้องใช้ทั้งการ Refresh page และ iframe 

 AJAX Asynchronouse Javascript Code:

<script type="application/javascript">
setInterval(loadJSON,5000);
function loadJSON()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

// Parse the JSON data structure contained in xmlhttp.responseText using the JSON.parse function.
var JSONObject = JSON.parse(xmlhttp.responseText);

// The JSONObject variable now contains the data structure and can be accessed as JSONObject.firstName and
// JSONObject.lastName. Assign the object members to the DOM elements FirstName and LastName so that they get
// displayed on the page
document.getElementById("Temperature").innerHTML = JSONObject.temperature + "°C";
document.getElementById("Humidity").innerHTML = JSONObject.humidity + "%RH";
document.getElementById("Voltage").innerHTML = JSONObject.voltage + "V";
document.getElementById("Current").innerHTML = JSONObject.current + "A";
document.getElementById("Power").innerHTML = JSONObject.power + "W";
document.getElementById("Light").innerHTML = JSONObject.light + "Lux";
}
}
xmlhttp.open("GET","https://nodered.elec2rak.com/aht21-001-json",true);
xmlhttp.send();
}
</script>
Live & Real-time data from ESP-01S + AHT21 WiFi MQTT Temperature and Humidity Sensor

Sunlight: Sunlight Lux

Temperature: Temperature °C

Humidity: Humidity %RH

Live & Real-time data from ESP-01S + PZEM-004T WiFi MQTT Smart Energy Meter

Voltage: Voltage V

Current: Current A

Power: Power W

Energy Today: EnergyToday kWh

Energy Yesterday: EnergyYesterday kWh

WiFi RSSI: RSSI dBm

Wait 5Secs or Click this button to update data

Reference: JSON and AJAX

สินค้าล่าสุด

Battery Balancer Equalizer for Gel Flood AGM Lead Acid Battery

Battery Balancer Equalizer for Gel Flood AGM Lead Acid Battery

ราคาเดิม
฿ 521
ราคา
฿ 401
Battery LifePO4 32650 6P4S 12V 30Ah BMS 50A Peak 800A Active Balance 5A

Battery LifePO4 32650 6P4S 12V 30Ah BMS 50A Peak 800A Active Balance 5A

ราคาเดิม
฿ 3,008
ราคา
฿ 2,727
PCB for BITAXE DIY Project 202 BM1366

PCB for BITAXE DIY Project 202 BM1366

ราคา
฿ 1,163
BM1366 BM1366AL BM1366AG ASIC CHIP For Antminer S19 XP air-cooling & water-cooling

BM1366 BM1366AL BM1366AG ASIC CHIP For Antminer S19 XP air-cooling & water-cooling

ราคา
฿ 802
แบบบ้าน ตู้คอนเทรนเนอร์ 1 ชั้น+เผื่อต่อเติม

แบบบ้าน ตู้คอนเทรนเนอร์ 1 ชั้น+เผื่อต่อเติม

ราคา
Ask for price
ขวดเปล่า ฝาไม้ สี่เหลี่ยม ใส่น้ำมันหอมระเหย กระจายความหอม รีฟิลได้ สำหรับแขวนในรถยนต์ 40ขวด

ขวดเปล่า ฝาไม้ สี่เหลี่ยม ใส่น้ำมันหอมระเหย กระจายความหอม รีฟิลได้ สำหรับแขวนในรถยนต์ 40ขวด

ราคาเดิม
฿ 2,045
ราคา
฿ 1,123
100G/1KG/20KG พีโปรตีนจากถั่วลันเตาสีทอง

100G/1KG/20KG พีโปรตีนจากถั่วลันเตาสีทอง

ราคา
฿ 160
100G/1KG/5KG เวย์โปรตีนไอโซเลท WPI90 (USA)

100G/1KG/5KG เวย์โปรตีนไอโซเลท WPI90 (USA)

ราคา
฿ 241
100G/1KG/5KG เวย์โปรตีนเข้มข้น (WPC 80) (USA)

100G/1KG/5KG เวย์โปรตีนเข้มข้น (WPC 80) (USA)

ราคา
฿ 201
100G/1KG/20KG โปรตีนถั่วเหลืองไอโซเลท 90% (710)

100G/1KG/20KG โปรตีนถั่วเหลืองไอโซเลท 90% (710)

ราคา
฿ 80
น้ำมันหอมระเหยโหระพาบริสุทธิ์ 100% สำหรับน้ำมันอโรมาเธอราพีอเนกประสงค์

น้ำมันหอมระเหยโหระพาบริสุทธิ์ 100% สำหรับน้ำมันอโรมาเธอราพีอเนกประสงค์

ราคา
฿ 201
น้ำมันหอมระเหยโป๊ยกั้กบริสุทธิ์ 100% สำหรับน้ำมันอโรมาเธอราพีอเนกประสงค์

น้ำมันหอมระเหยโป๊ยกั้กบริสุทธิ์ 100% สำหรับน้ำมันอโรมาเธอราพีอเนกประสงค์

ราคา
฿ 160
HONDA ACCORD 2.0 E MNC ปี 2012

HONDA ACCORD 2.0 E MNC ปี 2012

ราคา
฿ 379,426
HONDA CIVIC FD 1.8 S AT ปี 2007

HONDA CIVIC FD 1.8 S AT ปี 2007

ราคา
฿ 214,896
HONDA CIVIC FC 1.8 EL AT ปี 2016

HONDA CIVIC FC 1.8 EL AT ปี 2016

ราคา
฿ 626,162

โทร +669 4004 5061
อีเมล: [email protected]
Line ID: elec2rak

บทความใหม่เร็วๆนี้

  • Anet A8 Upgrading with MKS TinyBee and Marlin Firmware
  • DIY WiFi MQTT Dust Density Monitoring Alerting and Logger
  • เนื้อหาที่เปิดอ่าน 1165584
  • Web Links 12

มี 234 ผู้มาเยือน และ ไม่มีสมาชิกออนไลน์ ออนไลน์