Question

大家好，当我收到来自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>

Answer 1

您需要使用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>

Answer 2

尝试一下

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>

如何在其他情况下显示{“ POWER”：“ ON”}，如果（this.responseText ==（{“ POWER”：“ ON”}））{

2 个答案: