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

<h3>Configuration</h3>
MQTT Server:
<span id="mqtthost"></span>
<br/> MQTT Port:
<span id="mqttport"></span>
<br/> MQTT User:
<span id="mqttuser"></span>
<br/> MQTT Password:
<span id="mqttpass"></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>

<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;
					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>