Question

我想在Ajax响应中调用JS脚本。它的作用是将document.getElementById脚本传递给Ajax responseText。

当前代码返回此错误：Uncaught TypeError: Cannot set property 'innerHTML' of null

使用Visual Studio Cordova完成..

的Ajax：

$("#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';
        ";
}

Answer 1

你可以通过改变一个小来解决它，只需要你在php页面上写的ajax成功写js代码。在php页面上没有alertBox元素就是为什么发生错误。

你的Js代码是这样的： -

$("#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);
  });

和PHP代码一样： -

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

Answer 2

基本上你会收到这个错误，因为当你寻找时，你正在尝试改变的东西不在页面上。

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

页面上有html，只是更改其中的内容。

＆＃13;

$("#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);
      });

＆＃13;

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

＆＃13;

PHP代码：

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

Answer 3

使用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脚本

3 个答案: