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

Latest Products

Battery Balancer Equalizer for Gel Flood AGM Lead Acid Battery

Battery Balancer Equalizer for Gel Flood AGM Lead Acid Battery

Original Price
12.50 $
Price
10.00 $
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

Original Price
75.00 $
Price
68.00 $
PCB for BITAXE DIY Project 202 BM1366

PCB for BITAXE DIY Project 202 BM1366

Price
28.50 $
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

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

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

Price
Ask for price
40 Pcs Empty Wooden Bottle Square Lid Essential Oil Diffusers Refillable Car Air Freshener Perfume Bottles

40 Pcs Empty Wooden Bottle Square Lid Essential Oil Diffusers Refillable Car Air Freshener Perfume Bottles

Original Price
51.23 $
Price
27.64 $
100G/1KG/20KG Golden Pea Protein

100G/1KG/20KG Golden Pea Protein

Price
3.50 $
100G/1KG/5KG Whey Protein Isolate WPI90 (USA)

100G/1KG/5KG Whey Protein Isolate WPI90 (USA)

Price
5.50 $
100G/1KG/5KG Whey Protein Concentrate (WPC 80) (USA)

100G/1KG/5KG Whey Protein Concentrate (WPC 80) (USA)

Price
4.50 $
100G/1KG/20KG Soy Protein Isolate 90% (710)

100G/1KG/20KG Soy Protein Isolate 90% (710)

Price
1.50 $
100% Pure Basil Essential Oil for Multi-Purpose Aromatherapy Oil

100% Pure Basil Essential Oil for Multi-Purpose Aromatherapy Oil

Price
5.12 $
100% Pure Anise Essential Oil for Multi-Purpose Aromatherapy Oil

100% Pure Anise Essential Oil for Multi-Purpose Aromatherapy Oil

Price
3.56 $
HONDA ACCORD 2.0 E MNC ปี 2012

HONDA ACCORD 2.0 E MNC ปี 2012

Price
9,462.00 $
HONDA CIVIC FD 1.8 S AT ปี 2007

HONDA CIVIC FD 1.8 S AT ปี 2007

Price
5,359.00 $
HONDA CIVIC FC 1.8 EL AT ปี 2016

HONDA CIVIC FC 1.8 EL AT ปี 2016

Price
15,615.00 $

Phone: +669 4004 5061
Line ID: elec2rak

  • Articles View Hits 1184449
  • Web Links 12

We have 152 guests and no members online