Javascript 如果/else条件失败，请使用AJAX咨询设置JS innerHTML值_Javascript_Php_Html_Jquery_Ajax

Javascript 如果/else条件失败，请使用AJAX咨询设置JS innerHTML值

javascript php html jquery ajax

Javascript 如果/else条件失败，请使用AJAX咨询设置JS innerHTML值,javascript,php,html,jquery,ajax,Javascript,Php,Html,Jquery,Ajax,当我想检查来自和AJAX的值设置时，If条件有问题我制作了一个简单的页面来显示问题：主页： AJAX响应：使用“是”和“否”按钮，可以分别将Span“txtHint4”的innerHTML值设置为“是”或“否” 如果单击“检查”按钮，如果“txtHint4”=是，则Span“txtHint6”显示值“Ok”；如果“txtHint4”=否，则Span“Ko”显示值“Ok” 所有这些都可以很好地使用像said这样的按钮设置innerHTML“txtHint4”值，但是如果我使用和AJAX co

当我想检查来自和AJAX的值设置时，If条件有问题

我制作了一个简单的页面来显示问题：

主页：

AJAX响应：

使用“是”和“否”按钮，可以分别将Span“txtHint4”的innerHTML值设置为“是”或“否”

如果单击“检查”按钮，如果“txtHint4”=是，则Span“txtHint6”显示值“Ok”；如果“txtHint4”=否，则Span“Ko”显示值“Ok”

所有这些都可以很好地使用像said这样的按钮设置innerHTML“txtHint4”值，但是如果我使用和AJAX consult（使用按钮“Ask AJAX”）设置值，那么if。。然后。。使用“Check”（检查）按钮执行的语句无法验证条件，并在应显示“Ok”（确定）时显示“Ko”，因为“txtHint4”=是

主要代码如下：

<html> 

<body>

   <div style="width:1000px; float:left"> 
    <input type="button" name="Button" value="Yes" onclick="Yes()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px"/>
    <input type="button" name="Button" value="No" onclick="No()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px"/>
   </div>   

     <div style="width:1000px; float:left"> 
    <input type="button" name="Button" value="Ask AJAX" onclick="Ask()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold; padding:5px"/>
   </div>        
     
   <div style="border: 1px solid black; width:990px;float:left; margin-top:30px; margin-bottom:0px; font-size:50">
              <span id="txtHint4"></span>                        
   </div>   
     
     <div style="width:1000px; float:left; margin-top:30px; margin-bottom:30px"> 
    <input type="button" name="Button" value="Check" onclick="Check()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold; padding:5px"/>
   </div>   
     
     <div style="border: 1px solid black; width:990px;float:left; margin-top:0px; margin-bottom:30px; font-size:50"> 
                <span id="txtHint6"></span>                      
   </div>   
     
     <div style="width:1000px; float:left"> 
    <input type="button" name="Button" value="Erase" onclick="Erase()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px"/>
   </div>   

     
     
<script>
function Yes(){
    document.getElementById("txtHint4").innerHTML="Yes";
;}                                                                                                                                          
</script>       

<script>
function No(){
    document.getElementById("txtHint4").innerHTML="No";
;}                                                                                                                                          
</script>       

<script>
function Check() {
 var Text=document.getElementById("txtHint4").innerHTML;
 if (Text=="Yes"){document.getElementById("txtHint6").innerHTML = "ok";}
 else {document.getElementById("txtHint6").innerHTML = "ko";}                               
;}
</script>

<script>
function Ask() {
                                   var xmlhttp = new XMLHttpRequest();
                             xmlhttp.onreadystatechange = function() {document.getElementById("txtHint4").innerHTML = this.responseText;}      
                                                         xmlhttp.open("GET", "https://testdomain3.000webhostapp.com/Response.php", true);   
                             xmlhttp.send();                                     
                              }
</script>

<script>
function Erase(){
    document.getElementById("txtHint4").innerHTML="";
  document.getElementById("txtHint6").innerHTML="";
;}                                                                                                                                          
</script>   


</body>
</html>


函数Yes（）{
document.getElementById（“txtHint4”）.innerHTML=“是”；
;}                                                                                                                                          
功能编号（）{
document.getElementById（“txtHint4”）.innerHTML=“否”；
;}                                                                                                                                          
函数检查（）{
var Text=document.getElementById（“txtHint4”）.innerHTML；
如果（Text=“Yes”）{document.getElementById（“txtHint6”）.innerHTML=“ok”}
else{document.getElementById（“txtHint6”）.innerHTML=“ko”}
;}
函数Ask（）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=function（）{document.getElementById（“txtHint4”）.innerHTML=this.responseText；}
open（“GET”https://testdomain3.000webhostapp.com/Response.php“，对）；
xmlhttp.send（）；
}
函数擦除（）{
document.getElementById（“txtHint4”）.innerHTML=“”；
document.getElementById（“txtHint6”）.innerHTML=“”；
;}

以及“咨询AJAX”页面：

<?php

echo "Yes";
        
;?

您需要使用函数确保从响应文本
中删除所有不可见的空格
当您添加innerHTML
时，它会将不可见的空格
添加到txtHint4
文本中。因此，当检查if
条件时，只需在文本中使用trim（）

此外，我还将使用as来反对innerHTML
，因为您只添加简单的文本
，而不是HTML文本

现场工作演示：

函数Yes（）{
document.getElementById（“txtHint4”）.innerHTML=“是”；
}
功能编号（）{
document.getElementById（“txtHint4”）.innerHTML=“否”；
}
函数擦除（）{
document.getElementById（“txtHint4”）.innerHTML=“”；
document.getElementById（“txtHint6”）.innerHTML=“”；
}
函数检查（）{
var Text=document.getElementById（“txtHint4”）.innerHTML；
如果（Text.trim（）=“Yes”）{//使用trim（）函数
document.getElementById（“txtHint6”）.innerHTML=“ok”；
}否则{
document.getElementById（“txtHint6”）.innerHTML=“ko”；
};
}
函数Ask（）{
让req=newXMLHttpRequest（）；
req.onreadystatechange=（）=>{
if（req.readyState==XMLHttpRequest.DONE）{
document.getElementById（“txtHint4”）.innerHTML=req.responseText；
}
};
请求打开（“获取”https://cors-anywhere.herokuapp.com/https://testdomain3.000webhostapp.com/Response.php“，对）；
请求发送（）；
}

您需要使用函数确保从响应文本
中删除所有不可见的空格
当您添加innerHTML
时，它会将不可见的空格
添加到txtHint4
文本中。因此，当检查if
条件时，只需在文本中使用trim（）

此外，我还将使用as来反对innerHTML
，因为您只添加简单的文本
，而不是HTML文本

现场工作演示：

函数Yes（）{
document.getElementById（“txtHint4”）.innerHTML=“是”；
}
功能编号（）{
document.getElementById（“txtHint4”）.innerHTML=“否”；
}
函数擦除（）{
document.getElementById（“txtHint4”）.innerHTML=“”；
document.getElementById（“txtHint6”）.innerHTML=“”；
}
函数检查（）{
var Text=document.getElementById（“txtHint4”）.innerHTML；
如果（Text.trim（）=“Yes”）{//使用trim（）函数
document.getElementById（“txtHint6”）.innerHTML=“ok”；
}否则{
document.getElementById（“txtHint6”）.innerHTML=“ko”；
};
}
函数Ask（）{
让req=newXMLHttpRequest（）；
req.onreadystatechange=（）=>{
if（req.readyState==XMLHttpRequest.DONE）{
document.getElementById（“txtHint4”）.innerHTML=req.responseText；
}
};
请求打开（“获取”https://cors-anywhere.herokuapp.com/https://testdomain3.000webhostapp.com/Response.php“，对）；
请求发送（）；
}

onreadystatechange
在AJAX调用进行时，在不同阶段多次激发。您必须检查readyState和状态，或者改用onload
，只检查状态。请参考XMLHttpRequest指南，如在di上多次触发的…onreadystatechange
中的指南