从ajax响应运行Javascript脚本

问题描述：

我想在Ajax响应中调用JS脚本。它所做的就是将document.getElementById脚本传递给Ajax响应文本。从ajax响应运行Javascript脚本

目前的代码返回我这个错误：Uncaught TypeError: Cannot set property 'innerHTML' of null

这与Visual Studio科尔多瓦做..

阿贾克斯：

$("#loginBtn").click(function() { 
    var username = document.getElementById("username").value; 
    var password = document.getElementById("password").value; 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.write(this.responseText); 
     } 
    } 
    xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send("username=" + username + "&" + "password=" + password); 
});

PHP：

if($count == 1){ 
    echo "document.getElementById('alertBox').innerHTML = 'Login Success!'; 
     document.getElementById('alertBox').className = 'alert alert-success'; 
     document.getElementById('alertBox').style.display = 'block'; 
     setTimeout(function() { 
       window.location.href = '../html/dashboard.html'; 
      }, 1000); 
     "; 
}else{ 
     echo "document.getElementById('alertBox').innerHTML = 'Invalid login details'; 
     document.getElementById('alertBox').className = 'alert alert-danger'; 
     document.getElementById('alertBox').style.display = 'block'; 
     "; 
}

当您访问它并尝试设置'innerHTML'时，带有'alertBox'的元素不在DOM中。你是否在ajax调用之前的某处添加它？如果不是，你需要先做。 – varontron

我认为让PHP返回一个成功/失败指示符并让现有的Ajax JS测试返回值并使用适当的类显示适当的消息会更容易。另外，考虑到你使用jQuery，你为什么手工编写自己的Ajax调用而不是使用'$ .ajax（）'？ – nnnnnn

你需要创建一个脚本元素，然后从响应中添加文本，然后将该元素添加到DOM –

答

你可以解决它通过改变一个小的，只是你必须写你的AJAX成功的JS代码写在PHP页面。在PHP页面没有alertBox元素这就是为什么错误发生。

Your Js code will be like this:-

$("#loginBtn").click(function() { 
var username = document.getElementById("username").value; 
var password = document.getElementById("password").value; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     if(this.responseText=="success"){ 
     document.getElementById('alertBox').innerHTML = 'Login Success!'; 
     document.getElementById('alertBox').className = 'alert alert-success'; 
     document.getElementById('alertBox').style.display = 'block'; 
     setTimeout(function() { 
     window.location.href = '../html/dashboard.html'; 
     }, 1000); 
     }elseif(this.responseText=="error"){ 
     document.getElementById('alertBox').innerHTML = 'Invalid login details'; 
    document.getElementById('alertBox').className = 'alert alert-danger'; 
    document.getElementById('alertBox').style.display = 'block' 
     } 
    } 
} 
xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send("username=" + username + "&" + "password=" + password); 
    });

And php code like:-

if($count == 1){ 
echo "success"; 
}else{ 
    echo "error"; 
    }

为什么我不能想到这一点。非常感谢！ –

答

基本上你得到这个错误，因为你试图改变的事情是不是在页面上，当你寻找它。

你需要做的是，不要用PHP写javascript。你从PHP返回类似int的东西，然后用它来决定JavaScript的功能。

你有页面上的html，只是改变它里面的内容。

$("#loginBtn").click(function() { 
 
     var username = document.getElementById("username").value; 
 
     var password = document.getElementById("password").value; 
 
     var xmlhttp = new XMLHttpRequest(); 
 
     xmlhttp.onreadystatechange = function() { 
 
     if (this.readyState == 4 && this.status == 200) { 
 

 
      var str = this.responseText; //you may need to trim whitespace 
 
      var alert = document.getElementById('alertBox'); 
 
      if (str.trim() == 1) { 
 

 
       alert.innerHTML = 'Login Success!'; 
 
       alert.className = 'alert alert-success'; 
 
       alert.style.display = 'block'; 
 
       setTimeout(function() { 
 
       window.location.href = '../html/dashboard.html'; 
 
       }, 1000); 
 

 
      } 
 
      else { 
 

 
       alert.innerHTML = 'Invalid login details'; 
 
       alert.className = 'alert alert-danger'; 
 
       alert.style.display = 'block'; 
 

 
      } 
 
     } 
 
     xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
 
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
 
     xmlhttp.send("username=" + username + "&" + "password=" + password); 
 
     });

<div id="alertbox"></div>

PHP代码：

if($count == 1){ 
     echo 1; 
} 
else{ 
     echo 0; 
}

应该修剪在PHP中使用字符串时的响应...它是臭名昭着的添加额外的空白 – charlietfl

完成，但我从来没有这个问题，虽然。 –

如果您不需要做响应比较，通常不会出现问题 – charlietfl

答

使用eval像下面

$("#loginBtn").click(function() { 
var username = document.getElementById("username").value; 
var password = document.getElementById("password").value; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     var fun = eval(this.responseText); 
    } 
} 
xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send("username=" + username + "&" + "password=" + password);

}）;

从ajax响应运行Javascript脚本

相关推荐