0

大家好，当我收到来自 this.responseText 的响应时，我正试图让我的页面更改按钮颜色。我知道我从 Json 得到的响应，但我无法让它在我的代码中允许响应。

如果有人可以帮助我，那就太好了，我一直在努力让它工作一段时间，或者如果你知道我正在尝试做的更好的方法，请告诉我

<html>
    <head>
        <style>
            input.MyButton {
                width: 300px;
                padding: 25px;
                cursor: pointer;
                font-weight: bold;
                font-size: 150%;
                background: #3366cc;
                color: #fff;
                border: 1px solid white;
                border-radius: 10px;
                padding-bottom:25px;
            }
            input.MyButton:hover {
                color: #ffff00;
                background: #000;
                border: 1px solid #fff;
            }
            input.buttonStyle1 {
                 background: red; // or any color you wish
            }
            input.buttonStyle2 {
                 background: green; 
            }
        </style>
        <script type="text/javascript">
            function togglelight(ipstr) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        console.log(this.responseText); //To check output while error[Optional]
                        alert(this.responseText);
                        if (this.responseText == ({"POWER":"OFF"})) {
                            document.querySelector("input.MyButton").classList.add("buttonStyle1");
                        } else if (this.responseText == ({"POWER":"ON"})) {
                            document.querySelector("input.MyButton").classList.add("buttonStyle2");
                        }                 
                    }
                };
                xhttp.open("GET", "http://192.168.1."+ipstr+"/cm?cmnd=Power%20toggle", true);
                xhttp.send();
            }
        </script>
    </head>
    <body>
    <form>
        <br>
        <input class="MyButton" type="button" value="Office Light" onclick="togglelight('126')" />
        <br>
        <input class="MyButton" type="button" value="Fishtank Light" onclick="togglelight('128')" />
        <br>
        <label id ="officestatus">This</label>
    </form>
    </body>
</html>
4

2 回答 2

2

需要使用JSON.parse()转换responseText成对象，如下：

var responseObj = JSON.parse(this.responseText);

if (responseObj.POWER === "OFF") {
   document.querySelector("input.MyButton").classList.add("buttonStyle1");
} else if (responseObj.POWER === "ON") {
   document.querySelector("input.MyButton").classList.add("buttonStyle2");   
}

下面是一个更完整的示例，它使用id按钮上的值来分别打开或关闭它们。

它使用一个简单的帮助StripState()器来评估单击​​按钮的状态（开/关），然后允许我们模拟具有相反状态的 AJAX 响应。

var suffix_on = " On";
var suffix_off = " Off";

function togglelight(ipstr) {
  var button = document.querySelector("#btn_" + ipstr); // get button by its id
  var isOn = StripState(button);
  
  this.responseText = '{ "POWER" : "' + (isOn ? "OFF" : "ON") + '" }';
  console.log(button.id + ' -> ' + this.responseText);
  var responseObj = JSON.parse(this.responseText);

  if (responseObj.POWER === "OFF") {
    button.classList.remove("buttonStyle2");
    button.classList.add("buttonStyle1");
    button.value += suffix_off;
  } else if (responseObj.POWER === "ON") {
    button.classList.remove("buttonStyle1");
    button.classList.add("buttonStyle2");
    button.value += suffix_on;
  }
}

function StripState(btn) {
  var isOn = btn.value.endsWith(suffix_on);
  var isOff = btn.value.endsWith(suffix_off);
  if (isOn || isOff) {
    btn.value = btn.value.substring(0, btn.value.lastIndexOf(' '));
  }
  isOn = !isOff; // in case it contained neither suffix
  return isOn;
}
input.buttonStyle1 { background: red;   }
input.buttonStyle2 { background: green; }
<input id="btn_126" type="button" value="Office Light" onclick="togglelight('126')" /><br>
<input id="btn_128" type="button" value="Fishtank Light" onclick="togglelight('128')" /><br>

于 2019-08-09T10:06:54.450 回答
1

尝试这个

if (JSON.parse(this.responseText)["POWER"] == "OFF") {
   document.querySelector("input.MyButton").classList.remove("buttonStyle2");
document.querySelector("input.MyButton").classList.add("buttonStyle1");
}
else if (JSON.parse(this.responseText)["POWER"] == "ON") {
  document.querySelector("input.MyButton").classList.remove("buttonStyle1");
document.querySelector("input.MyButton").classList.add("buttonStyle2");   
}

如果你想使用同一个函数切换多个按钮的颜色，你可以将按钮的引用传递给函数，然后添加或删除它的类。

下面是函数

function togglelight(btn, ipstr) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        if (JSON.parse(this.responseText)["POWER"] == "OFF") {
            btn.classList.remove("buttonStyle2");
            btn.classList.add("buttonStyle1");
        }
        else if (JSON.parse(this.responseText)["POWER"] == "ON") {
            btn.classList.remove("buttonStyle1");
            btn.classList.add("buttonStyle2");   
        }                
     }
  };
  xhttp.open("GET", "http://192.168.1."+ipstr+"/cm?cmnd=Power%20toggle", true);
  xhttp.send();
}

和 HTML

<form>
    <br>
    <input class="MyButton" type="button" value="Office Light" onclick="togglelight(this, '126')" />
    <br>
    <input class="MyButton" type="button" value="Fishtank Light" onclick="togglelight(this, '128')" />
    <br>
    <label id ="officestatus">This</label>
</form>
于 2019-08-09T09:57:53.607 回答