How to display dynamic sensor value on webpage

How to display dynamic sensor value on webpage

มาดูขั้นตอนการเพิ่ม Script เพื่อแสดงค่าจากตัว Sensor ให้ Update ได้แบบ Real-time บน หน้าเวบเพจ โดยการใช้ AJAX แทนการ Auto Refresh จะทำได้ตอน Load ค่าใหม่เข้ามา เราไม่เห็นมา Browser กระพริบ เพื่อทำการ Refresh หน้าเพจ 

โดยสามารถทำได้ง่ายๆ ด้วยการเพิ่ม Script AJAX เข้าไปก่อน </head>

Code สำหรับ HTML Page ทั่วไป:

<script>
setInterval(loadDoc,60000);
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.body.innerHTML =this.responseText}
};
xhttp.open("GET", "", true);
xhttp.send();
}
</script>

Code สำหรับ Arduino HTML Page Web Server:

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";

โดยเราสามารถกำหนดความถี่ในการ  Update  ข้อมูลได้จากการกำหนดค่า setInterval() 

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";

Example: AJAX XMLHttpRequest Webpage

Dynamic Sensor Value HTML Webpage on ESP-01S Web Server:

Reference: Display Values of Multiple DS18B20s on ESP8266 NodeMCU Web Server

 Buy our Smart IoT devices:

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

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
  • เนื้อหาที่เปิดอ่าน 1165550
  • Web Links 12

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