WiFiThermostat/examples/PersWiFiManager-test/spiffs_rest_api_nonblocking/data/index.htm

<h3>Current Data</h3>
x:
<span id="x"></span>
<br/> y:
<span id="y"></span>
<br/> z:
<span id="z"></span>
<br/> current WiFi SSID:
<span id="ssid"></span>

<h6>Last updated
	<span id="ut"></span> seconds ago.
	<span id="status"></span>
</h6>

<h3>Update Data</h3>
<form id="xform" onsubmit="return transmit(this)">
	x:
	<input type="number" name="x" />
	<input type="submit" />
</form>
<form id="yform" onsubmit="return transmit(this)">
	y:
	<input type="text" name="y" />
	<input type="submit" />
</form>
<form id="zform" onsubmit="return transmit(this)">
	z:
	<input type="text" name="z" />
	<input type="submit" />
</form>

<a href="wifi.htm">WiFi settings</a><br/>
<a href="/update">Firmware Update</a>

<script>
	function g(i) { return document.getElementById(i) };
	var xhttp, updateTime;

	function transmit(f) {
		if (!xhttp) { //prevent simultaneous requests
			g("status").innerHTML = "updating...";
			xhttp = new XMLHttpRequest();
			xhttp.open("POST", "/api");
			xhttp.send(f ? (new FormData(f)) : "");
			xhttp.onreadystatechange = function () {
				if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
					var data = JSON.parse(xhttp.responseText);
					g("x").innerHTML = data.x;
					g("y").innerHTML = data.y;
					g("z").innerHTML = data.z;
					g("ssid").innerHTML = data.ssid;
					xhttp = null;
					g("status").innerHTML = "";
					updateTime = 0;
				}
			}
		}
		return false; //prevent form redirect
	}
	transmit();
	setInterval(function () { g("ut").innerHTML = ++updateTime; }, 1000);
	setInterval(transmit, 5000); //autoupdate display every 5s
</script>