<!DOCTYPE html>
<html>
<head>
  <title> Wifi relay </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <div>
    <div>
      <div class="b_title">
      <button class="simple-btn-red" onclick="redlamp()">Красная лампа</button>
      </div>
      <div class="b_title">
      <button class="simple-btn-green" onclick="greenlamp()">Зеленая лампа</button>
      </div>
 
    </div>
 </div>

<script type="text/javascript">


function getAllUrlParams(url) {
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
  var obj = {};
  if (queryString) {
    queryString = queryString.split('#')[0];
    var arr = queryString.split('&');
    for (var i = 0; i < arr.length; i++) {
      var a = arr[i].split('=');
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
      if (paramName.match(/\[(\d+)?\]$/)) {
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];
        if (paramName.match(/\[\d+\]$/)) {
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          obj[key].push(paramValue);
        }
      } else {
        if (!obj[paramName]) {
           obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string'){
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}
function loadJSON(json_url, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', json_url, true);
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
          }
    };
    xobj.send(null);
}
 function redlamp() {
  url = 'lamp';
  var num=getAllUrlParams().number;
  url=url+"?lamp=red&number="+num;
  loadJSON(url, function(response) {
  //alert(response);      
    //var json_obj = JSON.parse(response);
  //alert(response);
  });
} 
 function greenlamp() {
  url = 'lamp';
  var num=getAllUrlParams().number;
  url=url+"?lamp=green&number="+num;
  loadJSON(url, function(response) {
  //alert(response);      
    //var json_obj = JSON.parse(response);
  //alert(response);
  });
} 
</script>
</body>
</html>
<style>
.b_title {
  background-color: #D0DDE3;
  padding: 7px 10px;
  text-align: center;
  color: #637B85;
  font-size: 16px;
  font-weight: bold;
}
.simple-btn-red {
  margin-bottom: 5px;
  background: #FF0000;
  border: 1px solid #FF8439;
  color: #fff;
  height: 80px;
  padding: 6px 12px;
  box-shadow: 0 1px 0 #AA6799;
  border-radius: 4px;
}

.simple-btn-red:hover {
  background: #AA0000;
}
.simple-btn-green {
  margin-bottom: 5px;
  background: #5CB85C;
  border: 1px solid #398439;
  color: #fff;
  height: 80px;
  padding: 6px 12px;
  box-shadow: 0 1px 0 #006799;
  border-radius: 4px;
}

.simple-btn-green:hover {
  background: #449d44;
}   
</style>